Html Subtitles

Allows display of stylable 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-html.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

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.

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

tracks configuration

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>

Links

Specifications and documentation

• http://dev.w3.org/html5/webvtt/
• http://edutechwiki.unige.ch/en/WebVTT
• http://html5doctor.com/video-subtitling-and-webvtt/
• https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html
• https://dcmp.org/learn/213#CiY_resources
• BCP47 language codes

Validator and converter tools

• Online WebVTT validator
• Javascript validator tool (source code)
• Subtitles tools commercial site
• online srt converter
• desktop srt converter tool - cli (source code and win/Mac binaries)
• desktop srt converter tool - Windows GUI
• Windows subtitle editor (source code)
• EIA-608 to WebVTT Ruby Gem (source code)