Subtitles

Allows display of WebVTT subtitles in the player

Installation

Include the plugin next to the core player:

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

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

Create a custom player with subtitles on the configuration builder

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

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 clip (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 (is_default is kept for backwards compatibility). If present, the subtitle will be shown on 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 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 }
        ]}
          }
  ]
})

Notes

  • since version 1.5.1 (04/2019) , the tracks property hold the array of track sources. Previous releases used src
  • the is_default parameter has been renamed to default

Server side

VTT files must be served on a loose cross-origin policy (CORS) with an appropriate Access-Control-Allow-Origin header if they are loaded from a different domain, even a different sub domain.

For instance, in an Apache configuration:

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

For more details look up cross-orgin resource sharing.

It is recommended to serve VTT files with a mime type of text/vtt.

Specifications and documentation

Validator and converter tools

×
Popular searches

Live streaming

Live analytics

Ad scheduling

Monetization