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

Question

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

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

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

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

我进一步尝试了，
video标签的audioLanguage和lang属性as
document.getElementById(id).lang = selectedIndex;
和
document.getElementById(id).audioLanguage = selectedIndex;
即使这似乎不起作用。

为了更清楚，正如@Svenskunganka audioTracks[i].enable=TRUE; 的回答中所提到的，在所使用的版本中不支持铬。
那么，有没有其他方法可以做audioTracks[i].enable=TRUE 所做的事情。
我不想实现跟踪更改功能。此处的要求是仅向浏览器指示音轨更改。

EDIT:
正如我们在https://www.w3schools.com/tags/av_prop_audiotracks.asp 中看到的那样。 chrome 不支持此属性。那么指示必须更改轨道的替代方法是什么？
有没有别的办法。。还是 audioTrack 是唯一的方法（到目前为止我从搜索中了解到）？

Answer 1

您可以使用fetch() 或XMLHttpRequest() 请求.mpd 文件，使用.text() 或.responseText 将application/dash+xml 响应作为文本读取，将文本传递给DOMParser() 实例.parseFromString() 以创建一个#document，迭代document.documentElementPeriod元素的AdaptationSet子节点，使用.querySelector()得到Representation子节点，然后得到BaseURLRepresentation的子节点，其中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 尚未完全跨浏览器实现。见caniuse for Audio Track。您的问题很可能是您使用 Chrome 或 Firefox 来测试它。

Chrome has implemented it，但尚未宣布何时登陆。
它在 Firefox 33 中实现，但默认情况下未启用，必须通过用户偏好进行切换。 Gecko 似乎也存在一些问题，无法执行多轨播放，这就是为什么这个功能被禁用了这么长时间（在撰写本文时，Firefox 的版本为 57）。