2

What I want

My goal is to allow the users of my website to switch the active audio track of a specific video. Sadly I have no background in web development, and have not been able to figure out how to do it.

The video is in mp4 format and has 3 different audio tracks (as I can confirm with vlc media player for example). I would like to put it on the website and have buttons to select one of the three audio tracks, so that the visitor can watch the video and select the active audio track while the video is running.

What I want to do is analogous to what is described in example 1 of this blog post: https://gingertech.net/2011/05/01/html5-multi-track-audio-or-video/ which uses the HTMLMediaElement interface, specifically the audioTracks property. This seems to be not implemented in most browsers though, and I have not managed to make it work.

What I tried:

  1. Activate the feature flag in firefox, media.track.enabled. This does actually enable me to access myvideo.audioTracks, but it only ever returns a list with one single track, which I can then manipulate. I have not been able to access more than one track. Also, I would like to allow my users to switch between audio tracks without having to enable experimental features in their browsers.

var video = document.getElementsByTagName("video");
alert(video.audioTracks.length);
<html>

    <head>
        <title>Video Test</title>
    </head>

    <body>
    <video controls>
      <source src="my-video.mp4" type="video/mp4">
    </video>
</body>
This alerts 1.
  1. Use videojs. This had more or less the same results as approach 1, using player.audioTracks() returns only one audio track for my video.

var player = videojs('mix');
var audioTrackList = player.audioTracks();
alert audioTrackList.length;
<head>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>
<body>
    <video-js
        controls
        id="mix"
        preload="auto"
        width="640"
        height="264"
        data-setup="{}"
    >
        <source src="my-video.mp4" type="video/mp4" />
    </video-js>
</body>

What I have not yet tried

One idea that I have left, and will try now, is to extract the audio tracks from the video and append them manually to the <video-js> element (via player.audioTracks().addTrack(track) (see here)

Related Questions

There have been quite a few questions on SO with similar problems, but none of them seem to have solved my problem (many are not answered at all)

  1. Get MediaStreamTrack(audio) from Video The answer to this questions suggests a solution using web audio API to stream the videos audio to an audio element, and I have frankly not quite understood how this works, so this might be a viable solution, I don't know.
  2. Multiple audio tracks for HTML5 video also suggests using web audio api.

Summary

I want to show a video on a webpage, where the user can select between different audio tracks while the video is running. While the HTMLMediaElement.audioTracks exists, it doesn't seem to be implemented in many browsers, and even when activating it in firefox settings, I cannot select more than one audio track. The same problem appears using videojs. Answers to similar questions on SO suggest using the audioTracks property or some solution using web audio api.

So if someone could help explain the solution with web audio api, suggest a new solution, or point to an error that I made in my experiments, I would be very glad.

Trajektorie
  • 21
  • 1

0 Answers0