search

Peer5 / videojs-contrib-hls.js

HLS library for video.js using Dailymotion's hls.js tech
Apache License 2.0
108 stars 55 forks source link

CEA 608/708 captions into video.js on Chrome/FireFox #17

Open tbekiares opened 7 years ago

tbekiares commented 7 years ago

Hi, we are using hls.js+videojs-contrib-hls.js+video.js to playback live HLS content with embedded CEA 608/708 captions.

On Safari (using hls.js+videojs-contrib-hls.js via MSE, not native HLS playback), the CC button correctly appears in the video.js player control bar when the material contains CEA 608/708 captions; selecting "english" from the popup results in the proper rendering of captions.

On FireFox and Chrome, the CC button never appears.

If I try playing the source with the hls.js demo player in FireFox and Chrome (using hls.js directly on top of HTML5 video tag), the CC button shows up, and the captions render, suggesting the video.js part of this is working.

If I understand correctly, hls.js translates CEA 608/708 captions into text tracks which are then rendered by video.js and/or the HTML5 video control.

Is there additional glue code required in the videojs-control-hls.js bridge to make video.js aware of tracks in Chrome/FireFox?

I'm kind of surprised this works in Safari; it suggests that perhaps the HTML5 video element in safari is capable of handling text tracks wherein the video element in Chrome/FireFox isn't?

thoughts?

Thank you! Ty

dkkerr commented 7 years ago

Reverting to Video.js 5.13 works around the issue, which is due to this change:

https://github.com/videojs/video.js/pull/3798

tmm1 commented 7 years ago

On Safari (using hls.js+videojs-contrib-hls.js via MSE, not native HLS playback), the CC button correctly appears in the video.js player control bar when the material contains CEA 608/708 captions; selecting "english" from the popup results in the proper rendering of captions.

This is not the behavior I see with Safari 10 and video.js 5.19.2

In Safari, if I use MSE, I see the CC button with the english option. However, selecting it does nothing and no captions appear.

If I switch to native HLS (using skipContribHlsJs: true), then the CC button appears with an "unknown" option, and selecting it renders captions as expected.

In other browsers, no CC or subtitle button shows at all. If I use #19, then a subtitle button shows with two "unknown" options. Selecting the second makes captions show up, but not accurately.

On those same browsers, using hls.js directly without videojs renders captions as expected.