gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:02:04 26 4
gpt4 key购买 nike

我收到 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com