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

标签 javascript audio video html5-video video.js

我收到 h.264/aac 编码的 mp4 视频文件,我想播放它们。我的一些视频文件中有多个音频流或音轨(例如英语流和西类牙语流)。我想让用户在两个音轨之间切换。我已经尝试过 video.js,它可以很好地播放视频和默认音频流,但是我看不到任何可以在 UI 中更改音轨的方法,而且 videojs.audioTracks() 总是返回一个空数组(我'我正在使用 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>

但是来回切换音频效果不佳。音频立即切换,但视频卡住,直到它 catch 或什么的,但一切都变得不同步。

最佳答案

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

关于javascript - 我正在寻找一个支持视频文件中的多个音轨/流的 web/html5/javascript 视频播放器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60983436/

相关文章:

javascript - Forge Viewer 工具栏按钮未隐藏在手机屏幕上

javascript - 如何将 Express js 导入到 React js 中?

html - Prestashop:iframe音频自动启动 block

c++ - C++:多种声音,无需其他标题或库

php - 以编程方式将视频从 php 服务器流式传输到 android

javascript - lodash - 将对象添加到另一个对象

javascript - 将光标更改为指针并将 <td> 元素中的文本设为粗体

java - Java声音API。从调音台获取支持的音频格式

android - 从安卓内部存储播放视频

iphone - iOS:加密/解密视频文件