Multiple Embedded 608/708 closed caption will render in random order

[featheast]

Description

The issue is related to the order of closed captions on the player, and I can replicated it with VJS version of 7.18.1. Basically when a source MP4 include more than 1 captions, the order it's showing in the subtitles selector becomes random. In our case, we have a source of 6 different languages 708 captions (English, Spanish, Italian, French, German and Dutch).

Sources

I can't really provide the original test source as it's for private use.

Steps to reproduce

Load any MP4s with more than 1 608/708 closed captions, every reload of the player will end up with a new order of the subtitle selectors.

Results

Expected

Please describe what you expected to happen that did not happen in the description.

Error output

If there are any errors in the console, from the player, or anywhere else please include them here:

Additional Information

Please include any additional information necessary here. Including the following: In the code, we have a list for labelling purpose like following: captionServices: { SERVICE1: { language: "en", label: "English" }, SERVICE2: { language: "es", label: "Spanish" }, SERVICE3: { language: "fr", label: "French" }, SERVICE4: { language: "it", label: "Italian" }, SERVICE5: { language: "de", label: "German" }, SERVICE6: { language: "nl", label: "Dutch" }, } One of the many different outputs is like

videojs-http-streaming version

what version of videojs-http-streaming does this occur with? the version included as part of video.js, looks like to be 2.13.1

videojs version

what version of videojs does this occur with? video.js 7.18.1

Browsers

what browsers are affected? please include browser and version for each

• Chrome

Platforms

what platforms are affected? please include operating system and version or device and version for each

• MacOS

Other Plugins

are any other videojs plugins being used on the page? If so, please list them with version below.

• I am using the very basic setup of vjs without any third party libraries to interfere with.

Other JavaScript

are you using any other javascript libraries or frameworks on the page? if so please list them below.

• I am using the very basic setup of vjs without any third party libraries to interfere with.

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[featheast]

I had done some further reading of the code, it appears the textTracks from 608/708 will be added via the method createCaptionsTrackIfNotExists, which will be called when there is new captionData coming into the player. So my guess is the random order is determined by which language passed the captionData first to the player, then the player will based on that order to add the textTrack, and keep using that order. If this is the reason, i wonder if it's possible to do a re-order every time a new textTrack added in, based on the number from index as in SERVICE1, SERVICE2, etc.