繁体   English   中英

如何启用中的音轨更改 <video> 标记DASH内容?

[英]How to Enable audio track change in <video> tag for DASH content?

我已使用<video>标签将DASH视频嵌入网页中。 此内容有多个音轨。 我想支持音轨更改。
我使用了audioTracks[i].enable功能来选择一个音轨。 但是音轨没有改变。

if (selected == i) {
    audioTracks[i].enable = TRUE;
}
  1. 这是正确的方法吗?
  2. 还有其他方法可以更改DASH(.mpd)内容的音频轨道吗?

所谓音轨变化,是指发起一个音轨变化事件,该事件可能会传播到较低级别。 不自行实施修订。

我进一步尝试,
视频标签的audioLanguage和lang属性为
document.getElementById(id).lang = selectedIndex;

document.getElementById(id).audioLanguage = selectedIndex;
即使这似乎不起作用。

更清楚地说,如@Svenskunganka audioTracks[i].enable=TRUE;回答中所述audioTracks[i].enable=TRUE; 所用版本的铬不支持。
因此,是否有其他方法可以执行audioTracks[i].enable=TRUE操作。
我不想实现曲目更改功能。 这里的要求是仅指示浏览器的曲目更改。

EDIT
正如我们在https://www.w3schools.com/tags/av_prop_audiotracks.asp中看到的那样。 chrome不支持此属性。 那么指示必须更改轨道的另一种方法是什么?
还有其他方法吗? 还是audioTrack是唯一的方式(据我到目前为止的搜索了解)?

您可以使用fetch()XMLHttpRequest()请求.mpd文件,使用.text().responseText以文本形式读取application/dash+xml响应,将文本传递给DOMParser()实例.parseFromString()来创建#document ,迭代AdaptationSet的子节点document.documentElement Period元件,使用.querySelector()来获得Representation子节点然后得到BaseURL的子节点Representation ,其中,所述URL被.textContent具有到,至少在文件中引用,路径文件放在同一目录中。

我们还可以选择视频URL,使用Promise.all()加载和播放视频和音频轨道,以便能够调用HTMLMediaElement.captureStream() ,将其.clone()并传递给Promise构造函数的resolve() ,位于链.then()调用.addTrack()上的MediaStream()实例为每个轨道,然后设置<video> .srcObjectMediaStream包含音频和视频轨道。

 const video = document.querySelector("video"); const mediaStream = new MediaStream(); const url = "https://dash.akamaized.net/dash264/TestCases/10a/1/" const mpd = "iis_forest_short_poem_multi_lang_480p_single_adapt_aaclc_sidx.mpd"; const avc = []; video.oncanplay = video.play; fetch(`${url}${mpd}`) .then(response => response.text()) .then(text => { const parser = new DOMParser(); const xml = parser.parseFromString(text, "application/xml"); const period = xml.documentElement; const tracks = period.querySelectorAll("AdaptationSet"); for (let track of tracks) { const representation = track.querySelector("Representation"); const {textContent:currentTrack} = representation.querySelector("BaseURL"); console.log(currentTrack); // filter for specific track here, for example // where "english" is included within `.textContent` of node if (/english/i.test(currentTrack) || /avc/.test(currentTrack)) { avc.push(`${url}${currentTrack}`); } } Promise.all(avc.map(media => { return new Promise(resolve => { let v = document.createElement("video"); v.src = media; v.volume = 0.5; v.muted = true; v.oncanplay = () => { v.play(); resolve({ currentMedia:v , stream:v.captureStream().clone().getTracks()[0] }) } }) })) .then(tracks_ => { for (let {stream, currentMedia} of tracks_) { mediaStream.addTrack(stream); currentMedia.muted = false; } video.srcObject = mediaStream; }) }) 
 <video controls></video> 

音频轨道API尚未完全实现跨浏览器。 有关音频轨道,请参见caniuse 您的问题可能是您使用Chrome或Firefox对此进行了测试。

Chrome已实现,但尚未宣布何时发布。
它在Firefox 33中实现,但默认情况下未启用,必须通过用户首选项进行切换。 Gecko无法执行多轨播放似乎也存在一些问题,这就是为什么此功能已被禁用这么长时间的原因(在撰写本文时,Firefox的版本为57)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM