本文介绍了如何在< video>中启用音轨更改DASH内容的标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用< 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 。

我不想实现跟踪更改功能。这里的要求是仅指示浏览器的轨道更改。

编辑:

正如我们在。该属性在chrome中不受支持。那么指示轨道必须改变的替代方式是什么?

是否有其他方法?或者audioTrack是唯一的方法(据我所知,迄今为止)? 使用<$ c $请求 .mpd c> fetch()或 XMLHttpRequest(),阅读 application / dash + xml 使用 .text()或 .responseText 作为文本响应,将文本传递给 DOMParser ) instance .parseFromString()创建一个 #document ,迭代 AdaptationSet document.documentElement Period 元素的子节点,请使用 .querySelector()获取表示子节点,然后获得 BaseURL 子节点表示,其中的URL是 .textContent ,至少在引用的文件处具有相同的文件路径



我们也可以选择视频网址,使用 Promise.all()来加载和播放视频和能够调用 HTMLMediaElement.captureStream()的音轨,这是我们 .c lone()并传递给 resolve() Promise 构造函数,链接为 .then()调用 .addTrack()在 MediaStream()实例,然后将< 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(让轨道跟踪){const representation = track.querySelector(Representation); const {textContent:currentTrack} = representation.querySelector(BaseURL); console.log(currentTrack); //在此处过滤特定音轨,例如//其中english包含在节点if的.textContent中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>


I have embedded DASH videos in webpage using <video> tag. This content has multiple audio tracks. I want to support audio track change.
I used audioTracks[i].enable feature to select a audio track. But the audio track is not changing.

if (selected == i) {
    audioTracks[i].enable = TRUE;
}
  1. Is this the right way ?
  2. Is there any other way for changing the audio track of DASH(.mpd) content?

By audio track change, i mean to initiate a track change event that can propogate to lower level. not to implement a track change itself.

I further tried,
audioLanguage and lang attributes of video tag as
document.getElementById(id).lang = selectedIndex;
and
document.getElementById(id).audioLanguage = selectedIndex;
Even this doesnt seem to work.

To be more clear, as mentioned in answer by @Svenskunganka audioTracks[i].enable=TRUE; is not supported in chromium in version that is used.
So, Is there any alternate way of doing what audioTracks[i].enable=TRUE does.
I dont want to implement track change functionality. Requirement here is to just indicate a track change to the browser.

EDIT:
As we can see in https://www.w3schools.com/tags/av_prop_audiotracks.asp. This property is not supported in chrome. so what is the alternate way of indicating that track has to be changed?
Is there any other way ?. Or audioTrack is the only way (as i understand from search so far)?

解决方案

You can request the .mpd file using fetch() or XMLHttpRequest(), read the application/dash+xml response as text using .text() or .responseText, pass the text to DOMParser() instance .parseFromString() to create a #document, iterate AdaptationSet child nodes of document.documentElement Period element, use .querySelector() to get Representation child node then get BaseURL child node of Representation, where the URLs are .textContent having path to, at least at the file referenced, a file at the same directory.

We can also select the video URL, use Promise.all() to load and play both video and audio tracks for ability to call HTMLMediaElement.captureStream(), which we .clone() and pass to resolve() of Promise constructor, at chained .then() call .addTrack() on a MediaStream() instance for each track, then set <video> .srcObject to the MediaStream containing both audio and video tracks.

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>

这篇关于如何在&lt; video&gt;中启用音轨更改DASH内容的标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-12 23:12