如何在DASH内容的标签中启用音轨更改<video>？

Question

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

if (selected == i) {
audioTracks[i].enable = TRUE;
}

1. 这是正确的方法吗？
2. 还有其他方法可以更改DASH(.mpd(内容的音轨吗？

通过音轨更改，我的意思是启动一个可以传播到较低级别的轨道更改事件。 而不是实现轨道更改本身。

我进一步尝试，
视频标签的音频语言和lang属性作为
document.getElementById(id).lang = selectedIndex;
和
document.getElementById(id).audioLanguage = selectedIndex;
即使这样似乎也不起作用。

更清楚的是，如回答中所述 @SvenskungankaaudioTracks[i].enable=TRUE;在所使用的版本中不支持铬。
那么，有没有其他方法来做audioTracks[i].enable=TRUE做的事情。
我不想实现跟踪更改功能。这里的要求只是指示对浏览器的跟踪更改。

EDIT：
正如我们在 https://www.w3schools.com/tags/av_prop_audiotracks.asp 中看到的。此属性在镶边中不受支持。那么，指示必须更改轨道的替代方法是什么？
还有其他办法吗？还是音轨是唯一的方法(正如我从搜索中了解到的那样(？

Answer 1

您可以使用fetch()或XMLHttpRequest()请求.mpd文件，使用.text()或.responseText将application/dash+xml响应读取为文本，将文本传递给实例DOMParser().parseFromString()以创建#document，迭代document.documentElementPeriod元素的子节点AdaptationSet，使用.querySelector()获取Representation子节点然后获取Representation的BaseURL子节点， 其中 URL.textContent具有指向同一目录中的文件的路径，至少在引用的文件处。

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

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>

Answer 2

音轨 API 尚未完全跨浏览器实现。请参阅音轨的犬类。您的问题可能是您使用 Chrome 或 Firefox 来测试此问题。

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