我正在寻找一个支持视频文件中多个音频轨道/流的web / html5 / javascript视频播放器

debugcn 发表于 Dev

SvEnjoyPro

我收到了h.264 / aac编码的mp4视频文件，我想播放它们。我的一些视频文件中有多个音频流或音轨（例如英语流和西班牙语流）。我想允许用户在两个音轨之间切换。我尝试了video.js，它将可以正常播放视频和默认音频流，但是我看不到有任何方法可以更改UI中的音轨，而videojs.audioTracks（）始终返回一个空数组（我m使用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中插入了插件/扩展名，或者是其他播放器？

编辑：

这是一个基本的示例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>