HTML Subtitles

Allows the display of stylable WebVTT subtitles in Flowplayer Native.

Manual Javascript setup

Include the plugin next to the core player:

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/subtitles.min.js"></script>

<!-- load playlist plugin if you need subtitles in playlists
<script src="//cdn.flowplayer.com/releases/native/3/stable/3/plugins/playlist.min.js"></script>
-->

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed players

The subtitles plugin is included by default in the platform-managed async and iframe players.

Supported formats

The plugin supports webVTT text track files as well as embedded WebVTT in an HLS m3u8 manifest, plus CEA-608/708 and SCTE embedded captions. For all embedded types you do not need to configure the tracks object; all configuration comes from the stream. This also means you cannot override the label or default.

Support for embedded captions in native HLS implementations may vary.

SRT subtitles are not officially supported by the html5 <video> standard. Please use one of the converters listed in the links section to convert to WebVTT.

Configuration

Subtitles are configured in the src (for playlists) or player level object subtitles and the child object tracks, which can contain multiple subtitle tracks in different languages.

subtitles configuration

    • option
    • description
    • false boolean
    • to disable existing subtitles with subtitles: false
    • tracks array
    • contains one or multiple track source objects with the following properties:

tracks configuration

    • option
    • description
    • crossorigin string
    • adds a crossorigin attribute to the element, possible values: use-credentials, anonymous
    • default boolean
    • defines which track to show as default, one per tracks: array. If set, this track will be on at player start.
    • id string
    • the id of the subtitle
    • kind string
    • possible options: captions, subtitles, descriptions
    • label string
    • label to show in the menu
    • lang string
    • the language of the subtitle (2 letter BCP47 code)
    • src string
    • WebVTT file url

Sample code

Sample code single clip player

var player = flowplayer('#container',
   { src  : "//edge.flowplayer.org/bauhaus.m3u8"
   , subtitles:
       { tracks:
        [
        { src: "//yourserver.com/subtitles-demo-en.vtt"
          , label: "English"
          , id: "English-en"
          , default: true
          , crossorigin: "anonymous" }
        , { src: "//yourserver.com/subtitles-demo-fr.vtt"
          , label: "Francais"
          , id: "Francais-fr"
          , default : false
          , crossorigin: "anonymous" }
        ]}
        })

Sample code playlist

Requires loading the playlist plugin

var player = flowplayer.playlist('#container', {
  playlist: [
    { src: "//edge.flowplayer.org/bauhaus.mp4"
      , title: "Bauhaus"
      , subtitles:
       { tracks:
        [
        { src: "//yourserver.com/bauhaus-en.vtt"
          , label: "English"
          , default: true }
        , { src: "//yourserver.com/bauhaus-fr.vtt"
          , label: "Francais"
          , default : false }
        ]}
     }
     , { src: "//edge.flowplayer.org/functional.mp4"
         , title: "Functional",
         , subtitles:
       { tracks:
        [
        { src: "//yourserver.com/functional-en.vtt"
          , label: "English"
          , default: true }
        , { src: "//yourserver.com/functional-fr.vtt"
          , label: "Francais"
          , default : false }
        ]}
          }
  ]
})

Generated HTML

The HTML consists of three main components:

  1. an external wrapper <div> with the class .fp-captions
  2. an internal <pre> with the class .fp-cue
  3. the html from the VTTCue which is dependent on the browser's implementation of getCueAsHTML()

This is a raw HTML example:

<div class="fp-captions">
  <pre class="fp-cue">
    Todo mundo quer mais da vida ..
    Esta é uma segunda linha
    E um terceiro
  </pre>
</div>

Below is a list of useful resources to learn about, create, convert and manage WebVTT subtitles.

Specifications and documentation

Validator and converter tools

Results