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.

  • 相关阅读:
    这篇是Mark刚写的文档,原文为http://blogs.technet.com/markrussinovich/archive/2009/11/03/3291024.aspx
    自动加域批处理脚本[转]
    一次moveuser的使用经历[转]
    How to create fully custom Role, User, Event, Resource classes for use with the Security and Scheduler modules
    VBS脚本批处理创建域用户【可自动设置用户密码,创建OU】[转]
    eXpress App Framework Team
    客户端【脚本】自动加入域[转]
    XAF 如何控制自定义按钮的使用权限[转]
    How to make crossthread calls. (多线程操控窗体控件之不可行)
    改变TFS本地映射路径.
  • 原文地址:https://www.cnblogs.com/seesky/p/3659058.html
Copyright © 2011-2022 走看看