With the release of videojs-http-streaming (VHS) v1.2.0 on July 16th 2018, Video.js has built-in support for CEA/CTA-608 captions carried in FMP4 segments. This means that closed captions are automatically parsed out and made available to Video.js players for MPEG-DASH content and HLS streams using FMP4 segments. Here’s a sample player that shows the captions (English with the “CC” button is the track with CEA-608 captions).
If you are curious about CEA-608 captions and the approach we used to parse them out of fmp4s, or a general overivew, you can watch my talk from Demuxed 2018.
Caption Parsing is handled by the mux.js library and interacts with VHS to feed parsed captions back to Video.js.
Usage
Create a CaptionParser:
1 | import { CaptionParser } from 'mux.js/lib/mp4'; |
When working with HLS and MPEG-DASH with fmp4 segments, it’s likely that not all the information needed to parse out captions are included in the media segments themselves, and metadata from the init
segment needs to be passed to the CaptionParser. For this reason, the video trackIds and timescales defined in the init
segment should be passed into the CaptionParser.
1 | import mp4probe from 'mux.js/lib/mp4/probe'; |
Calling captionParser.parse
with data containing CEA-608 captions will result in an object with this structure:
1 | { |
You can then take one caption and create a VTTCue
to add to a TextTrack
with Video.js APIs
1 | const player = videojs('video'); |
VHS is included by default with videojs v7.x.