HTML Subtitles plugin

The HTML Subtitles plugin allows the display of styled WebVTT subtitles in Wowza Flowplayer. When you configure this plugin, you can include numerous tracks to display subtitles in different languages.

With version 3.10.0 of the player, we also added plugin enhancements to improve accessibility for a broader audience. The player includes out-of-the-box functionality to allow viewers to adjust various subtitle options, such as font size, font family, font color, and font opacity. Additionally, background color and opacity, as well as character edge styling can be managed from the player's user interface. You can play the following video to see the HTML Subtitles plugin in action.

Subtitle settings are saved in each site's localStorage browser property. Therefore, viewers using non-incognito mode get the same settings for all site videos until the local storage is cleared.

Installation

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>
-->

Supported formats

This 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 src (for playlists) or player level object subtitles and the child object tracks which can contain multiple subtitle tracks in different languages.

Subtitle options

Track options

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

This code sample 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 }
        ]}
          }
  ]
})

API

Subtitles API events

Subtitles menu events

There are two additional events which are bound to the subtitles menu Web component and emitted when new text tracks are added to the menu or selected.

Please see Web components subtitle events for the events.

Generated HTML

The HTML consists of three main components:

• An external wrapper <div> with the class .fp-captions .
• An internal <pre> with the class .fp-cue .
• 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>

With player versions before version 3.10.0, you must style the subtitles with custom CSS:

/* make the subtitles bigger, fonts full black on a white background */
.fp-captions .fp-cue {font-size: 2em; color: black; background-color: white;}

Links

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

Specifications and documentation

• WebVTT EduTech wiki
• Video subtitling and WebVTT
• Conversion of 608/708 captions to WebVTT
• Learning center: Media accessibility information, guidelines, and research
• BCP47 language subtag lookup

Validator and converter tools

• Online WebVTT validator
• Javascript validator tool (source code)
• Subtitles tools commercial site
• Desktop SRT converter tool - CLI (source code and Windows, macOS binaries)
• Desktop SRT converter tool - Windows GUI
• Windows subtitle editor (source code)
• EIA-608 to WebVTT Ruby Gem (source code)