zoukankan      html  css  js  c++  java
  • Flowplayer-Subtitle

    SOURCE URL: https://flowplayer.org/docs/subtitles.html

    Setting up

    Subtitles are loaded with a <track> element as follows

    <div class="flowplayer">
    <video>
    <source type="video/webm" src="http://mydomain.com/my-video.webm">
    <source type="video/mp4" src="http://mydomain.com/my-video.mp4">
    <source type="video/ogg" src="http://mydomain.com/my-video.ogv">
     
    <!-- the track element -->
    <track src="/path/to/my-subtitles-en.vtt">
     
    </video>
    </div>

    The WEBVTT file of the track element has the following structure:

    WEBVTT FILE
     
    1
    00:00:01.000 --> 00:00:04.000
    The first subtitle from 1 seconds to 4 seconds
    This is a second line
    And a third one
     
    2
    00:00:05.000 --> 00:00:06.000
    <b>Bold</b>, <i>italic</i> and <u>underlines</u> are supported
     
    ...

    A sample file. Understanding the VTT file format.

    Note: Subtitles must be loaded from a local path - unless they are served with a loose cross-origin policy with an appropriate Access-Control-Allow-Origin header. For instance, in an Apache configuration:

    Header set Access-Control-Allow-Origin "*"

    For more details look up cross-orgin resource sharing.

    Custom looks

    The first subtitle above would be rendered on the player as follows

    <div class='fp-subtitle'>
    <p>The first subtitle from 1 seconds to 4 seconds</p><br>
    <p>This is a second line</p><br>
    <p>And a third one</p><br>
    </div>

    Flowplayer comes with a default look for the subtitles but here is how you can alter the looks with CSS

    / override default looks /
    .flowplayer .fp-subtitle {
    font-size: 18px;
    }
     
    / visible subtitle looks (.fp-active class) /
    .flowplayer .fp-subtitle.fp-active { 
    opacity: 0.8;
    }
     
    / custom looks for 7:th subtitle /
    .flowplayer.cue6 .fp-subtitle p {
    font-size: 40px;
    }

    Native subtitles

    Currently the <track> element is supported natively in following browsers

    • IE 10 (since November 2011)
    • Google Chrome 18 (since November 2011)
    • Safari 6 (July 2012)
    • Opera 12.5 (August 2012)

    You can enable native support with nativesubtitles configuration variable and by adding default attribute to your track element. For example

    <div class="flowplayer" data-nativesubtitles="true">
    <video>
    <source type="video/webm" src="http://mydomain.com/my-video.webm">
    <source type="video/mp4" src="http://mydomain.com/my-video.mp4">
    <track src="/path/to/my-subtitles-en.vtt" default>
    </video>
    </div>

    After this subtitle looks are browser dependent and you lose the CSS customization possibilities. Native support is present when flowplayer.support.subtitles is true. For example

    if (flowplayer.support.subtitles) {
    // do your thing
    }

    JavaScript API

    Internally flowplayer uses cuepoints to notify when subtitle starts and ends. Here is an example of how to capture subtitle events

    player.bind("cuepoint", function(e, api, cuepoint) {
     
    var subtitle = cue.subtitle;
     
    // start a subtitle
    if (subtitle) {
     
    }
     
    // end the subtitle
    if (cuepoint.subtitleEnd) {
     
    }
     
    });

    The subtitle object has following properties title, startTime, endTime and text. An API property subtitles is an array of all subtitles. For example

    console.info(flowplayer().subtitles);

    Known issues and limitations

    Flowplayer does not add any UI element for controlling subtitles. If the <track> element is provided subtitles are enabled and cannot be removed by the user. You also need to control the language of the subtitles on your web application. User cannot switch the language from the player.

    Flowplayer does not support VTT extra definitions such as text alignment and line position. Style is completely controlled with CSS for full cross browser support.

    When using the default attribute on the track element some browsers may show their native controlbar for a short glimpse of time.

    Currently subtitles are not supported in playlists and are omitted when the player is embedded.

  • 相关阅读:
    Hbase架构与原理(转)
    Hbase的表结构中rowkey的设计---避免热点问题
    mysql之my.cnf详解
    MongoDB CPU利用率很高,怎么破(转)
    数据库设计(2/9):域,约束和默认值(Domains, Constraints and Defaults)
    数据库设计(1/9):数据元(Data Elements)
    SQL Server安全(11/11):审核(Auditing)
    VARCHAR列上的索引
    SQL Server 2016里的sys.dm_exec_input_buffer
    在SQL Server里禁用聚集索引——真的好么?
  • 原文地址:https://www.cnblogs.com/seesky/p/3659058.html
Copyright © 2011-2022 走看看