我正在寻找 web/html5/javascript 支持视频文件中多个音频 tracks/streams 的视频播放器

Question

我收到 h.264/aac 编码的 mp4 视频文件，我想播放它们。我的一些视频文件中有多个音频流或音轨（例如英语流和西班牙语流）。我想让用户在两个音轨之间切换。我试过 video.js，它可以很好地播放视频和默认音频流，但我看不出有任何方法可以更改 UI 和 videojs.audioTracks() 中的音轨始终 returns 一个空数组（我正在使用 Chrome 并且我只需要支持 Chrome）。

var video = document.getElementById("video");
video.audioTracks; // <-- undefined

和

let video = videojs('video');
let audioTrackList = video.audioTracks();
audioTrackList.tracks; // <-- [] empty array

有谁知道解决方案，无论是我在 video.js 中做错或遗漏的事情，video.js 的 plugin/extension，还是完全不同的播放器？

编辑：

这是一个基本示例 html 文件：

<html>
<head>
  <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup="{}"
  >
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
<script>
var vid = document.getElementById("my-video");
vid.onloadeddata = function() {

    // get the current players AudioTrackList object
    var player = videojs('my-video')
    let tracks = player.audioTracks();

    alert(tracks.length);

    for (let i = 0; i < tracks.length; i++) {
        let track = tracks[i];
        console.log(track);
        alert(track.language);
    }
};
</script>
</body>
</html>

而且它只会提醒“0”。没有后续警报和控制台日志。在 Chrome、Firefox 和 Edge 中测试。

更新：我终于发现在 chrome://flags (https://caniuse.com/#feat=audiotracks) 中启用标志 "enable-experimental-web-platform-features" 让这个方法起作用。

下面是一些基本的 html 代码：

<html>
<head>
    <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet"/>
<body>
<video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="264"
        data-setup="{}">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
        >
    </p>
</video>

<button onclick="onClick()">Toggle Audio</button>
<script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
<script>
    var VIDEO_JS = videojs('my-video');

    function onClick() {
        let tracks = VIDEO_JS.audioTracks();

        tracks.tracks_[0].enabled = !tracks.tracks_[0].enabled;
        tracks.tracks_[1].enabled = !tracks.tracks_[1].enabled;
    }
</script>
</body>
</html>

但是来回切换音频效果不佳。音频立即切换，但视频冻结，直到它赶上或什么的，但一切都变得不同步。

Answer 1

根据 video.js 文档 (https://docs.videojs.com/docs/guides/audio-tracks.html)，video.js 当前不支持音轨用户切换：

Missing Funtionality

It is currently impossible to add AudioTracks in a non-programtic way Literal switching of AudioTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation

您可以通过编程方式添加、删除和启用曲目 - 相关说明包含在上面的 link 中。

要查看视频中的所有音轨：

player.audioTracks() -> AudioTrackList

This is the main interface into the audio tracks of the player. It returns an AudioTrackList which is an array like object that contains all the AudioTrack on the player.

如果您查看下面的代码片段，它会显示视频开始并使用上述方法列出音轨。查看警报和控制台输出（在撰写本文时，最新 video.js 发行版的控制台似乎有错误，但您可以忽略它并向下滚动，您将看到音轨列表） .

这是基于 video.js 入门指南，您可以替换任何视频 URL 您必须查看自己的视频。

var vid = document.getElementById("my-video");
vid.onloadeddata = function() {
        
    // get the current players AudioTrackList object
    var player = videojs('my-video')
    let tracks = player.audioTracks();
    
    alert(tracks.length);
    
    for (let i = 0; i < tracks.length; i++) {
        let track = tracks[i];
        console.log(track);
        alert(track.language);
    }
};

<head>
  <link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup="{}"
  >
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  
  <script src="https://vjs.zencdn.net/7.7.5/video.js"></script>

</body>

Answer 2

您应该将视频转换为 HLS。 Video.js 使用 HLS 自动支持多个音轨。

我正在寻找 web/html5/javascript 支持视频文件中多个音频 tracks/streams 的视频播放器

I'm looking for a web/html5/javascript video player that supports multiple audio tracks/streams within the video file

javascript

audio

video

html5-video

video.js