Playing multiple audio tracks on <video> element?

user_3078911 0
Viewed 6054

I'm trying to create an accessible <video> element for a regular HLS video stream. However, I noticed that there is no cross-browser way to specify multiple audio tracks and switch between them efficiently, like you can with closed-captions.

I've considered the audioTrack property but this does not work on many browsers. I've tried mediaGroup as well, which is also not cross-browser compatible.

The only thing I've seen that may work is video.js (https://docs.videojs.com/docs/guides/audio-tracks.html), but I was wondering if there was a way to do this without bringing in this library.

Seems odd that you wouldn't be able to do this without a library.

The end goal is to programmatically switch audio tracks for different language audios on an HTML5 video across all (most) browsers.

cross-browser html javascript
1 Answers

If I understand you correctly, you want to be able to switch between languages on a video track. I found this bit of code that has a main audio track of English and allows you to switch between English and French using video.audioTracks draft property. You can read more about it at https:gingertech.net

<video id="v1" poster=“video.png” controls>
<source src=“video.ogv” type=”video/ogg”>
<source src=“video.mp4” type=”video/mp4”>
</video>

<script type="text/javascript">
video = document.getElementsByTagName("video")[0];

for (i=0; i < video.audioTracks.length; i++) {
    if (video.audioTracks[i].language.substring(0,2) === "fr") {
        video.audioTracks[i].enabled = true;
    } else {
        video.audioTracks[i].enabled = false;
    }
}
</script>
user_90998420
Related