Chrome and Opera fail to load subtitles and captions

[hirvinen]

At least Opera 32.0 and Chrome 45 fail to load subtitles / captions

See example at http://docs.videojs.com/docs/examples/simple-embed/index.html
Open browser console, then click play. Notice that the control bar does not have caption and subtitle controls.
Verify they are accessible by the browser:

// hide video.js controls
videojs.getPlayers()['example_video_1'].controlBar.hide();

// show browser controls
document.getElementById('example_video_1_html5_api').controls = true;

// list text tracks seen by video.js
videojs.getPlayers()['example_video_1'].textTracks();
// output on Chrome: TextTrackList {tracks_: Array[0], vdata1444313627889: 15}

// display captions
document.getElementById('example_video_1_html5_api').textTracks[0].mode = 'showing';
// display subtitles
document.getElementById('example_video_1_html5_api').textTracks[1].mode = 'showing';

Browser controls can also toggle display of one of these text tracks.

[nik0s100]

Same Here too...

[chemoish]

Verified that videojs('example_video_1') works, but data-setup={}, alone, does not.

<video id="example_video_1" data-setup="{}"></video>

<script>videojs('example_video_1')</script>

https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L259 doesn't get fired and https://github.com/videojs/video.js/blob/master/src/js/control-bar/text-track-controls/captions-button.js doesn't get instantiated.

[mauritzn]

Having the same issue here, the subtitles are shown, but not with the correct styling and no subtitle menu is showing. The problem does not occur with Firefox.

<script>videojs('example_video_1')</script>

Has no change what so ever for me.

[chemoish]

I believe there is a couple of outstanding issues that doesn't use native captions for FF. So this is probably why it doesn't effect it.

[gkatsev]

At first I thought it might be a cross-origin issue but the captions in the demo-page are on the same domain. I'll have to investigate.

[platbr]

I have the same problem here with Chrome 46.0.2490.80 (64-bit) on OSX, Subtitle/Captions menu is not generated.

The player still loading the default subtitle track even without this menu.

[osanwe]

When I've changed setup data from

var video_setup = { 'controls': true,
                    'preload': 'none',
                    'playbackRates': [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3],
                    'poster': getPosterUrl(jsonObject),
                    'techOrder': [ 'html5', 'flash' ],
                    'tracks': [
                        { src: 'video/0546_prepod_01H.vtt', kind: 'subtitles', srclang: 'ru', label: 'Русский' },
                    ],
                    'plugins': {
                        videoJsResolutionSwitcher: {
                            default: 'low',
                            dynamicLabel: true
                        }
                    }}

to

var video_setup = { 'controls': true,
                    'preload': 'none',
                    'playbackRates': [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3],
                    'poster': getPosterUrl(jsonObject),
                    'techOrder': [ 'html5', 'flash' ],
                    'plugins': {
                        videoJsResolutionSwitcher: {
                            default: 'low',
                            dynamicLabel: true
                        }
                    }}

and added the text track in the initial function

player.addRemoteTextTrack({ src: 'video/0546_prepod_01H.vtt', kind: 'subtitles', srclang: 'ru', label: 'Русский' });

the subtitles switcher appeared in control bar but I do not see subtitles when the video plays. In FF all works well.

[raxmatov]

Video.js with hls and vast preroll doesn't works. Occured cors error. But i configure allow * on wowza media streamer and each web server. Doesn't work. Who can help me? Thanks

[gkatsev]

@izzat4441 if you have a particular issue, please open a separate issue about it and not post on a completely unrelated existing issue.

[raxmatov]

oh sorry. Thank u

[osanwe]

Fix was found. After adding

'html5': {
    nativeTextTracks: false
}

to video setup subtitles started to work.

With Google Chrome there is another problem. It does not load subtitles from localhost. You can easily use remote subtitles file (i.e. from dropbox) or start Google Chrome with --disable-web-security key.

[STPo]

Anything new on this issue?
I'm having the same problem with subtitles on Win7 / Chrome 47.0.2526.106 m and VideoJS 5.4.4.
Everything works fine on Fx and IE.

[mkody]

I can confirm that @osanwe's fix works.

[CoWinkKeyDinkInc]

I was able to somehow get both the CC and Subtitles button to appear by just fiddling with the HTML, but I can't figure out how I did it again. The buttons just appeared and I couldn't switch between them. The closed caption does appear by using the default option except now any caption that is supposed to appear less than 10 or 20 seconds into the video does not appear.

[jaythespacehound]

The following works to get subtitles working on chrome using native captions:
html:

<video id="mov" width="860" height="484" class="video-js vjs-default-skin" 
    controls preload="auto">
</video>

js:

function createPlayer(src, subs){
      video=document.getElementById("mov");
      var source = document.createElement("source");
      source.setAttribute("src", src);
      source.setAttribute("type","video/mp4");
      var sub = document.createElement("track");
      sub.setAttribute("label", "English");
      sub.setAttribute("kind", "subtitles");
      sub.setAttribute("srclang", "en");
      sub.setAttribute("src", subs);
      video.appendChild(source);
      video.appendChild(sub);
      videojs("mov",{},function(){
      //player is initialised
      });
      }
createPlayer("pathtomediafile","pathtosubfile");

Kind of ugly workaround but there you go.
There is a slightly separate issue though in which in firefox, using the above, no track element is created by video.js. Subtitles still magically work but are non-native and video.textTracks is empty (which is bad when you're trying to edit them on the fly)

Maybe this helps track down the bug?

EDIT: Intriguingly, writing the exact same html as is created using the javascript appendChild by hand and then calling videojs("mov",{},function(){}); does not work. This seems really weird to me, can someone confirm? Could be a document.readyState bug or something...

[mcbanderson]

@osanwe's fix worked for me as well.

[cubeallspark]

Hello everyone,

I am noob in all of this and I am stuck with this problem, can you please post full code example, how you load the player with html and also how you write the script? Thanks
@osanwe

[mauritzn]

Simply add: "html5": { nativeTextTracks: false }
To the option of the VideoJS element.

You can read about adding options to VideoJS here:
http://docs.videojs.com/docs/guides/options.html

If you for some reason don't figure it out from that, here is the full code that I use:

var player = videojs("videoJsElement", {
  "html5": {
    nativeTextTracks: false
  }
});

Hope you get it working,
@cubeallspark

[cubeallspark]

I got it, thank you very much, I appreciate your help :)

@mauritznilsson @osanwe

[MCGallaspy]

Just encountered this same issue on Chrome 48, too. Not sure I understand the underlying cause -- is it lack of vendor support for some html5 feature, or a bug in video.js?

[ghost]

Caption will not work on iOS if nativeTextTracks = false

[GuilhermeGuiuler]

Personal someone could help me in chrome not appear to change the subtitles, please help me

[gkatsev]

Hopefully, this is fixed by @mister-ben in #3212. It's released in 5.8.7, please try it out and let us know!

[digibill]

I have the same issue on Chromium Version 80.0.3987.100 (Official Build) snap (64-bit), running on Ubuntu 19.10