javascript – HTML5视频 – 更改多个来源

2019-09-29 08:37:02 阅读：138 来源： 互联网

我在谷歌上发现了几个关于这个问题的网站,并且在这里也发现了一些问题,这些问题显然得到了解答,但是因为我在过去的一两周内一直在研究这个问题而且似乎无法得到它工作,我想重温这一点.

我正在开发一个使用多个视频标签(vd1-3)的演示,然后在几个画布标签(cv1-3)中使用.

<video id="vd1" width="480" preload> 
    <source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm">
    <source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4">
</video>

<canvas id="cv1" width="160" height="270"></canvas>

我有一个使用一个视频的工作版本.现在,我希望能够动态更改我的视频标签中播放的剪辑以及随后的画布标签.改变只有一个源工作,据我记得那只是“vd1.src =’…’”,但我希望至少有两个视频文件.
现在你可以在这里看到,我尝试使用id作为源代码(正如在stackoverflow上的回答问题中所建议的那样),但是我无法做到这一点.

我们能够通过这里的一些代码获得所有来源：

var x = document.getElementById("vd1");

var items = x.getElementsByTagName("source");

for(var i= 0; i < items.length; i++){
    alert(items[i].getAttribute('src'));
}
}, false);

但我也没有使用它来改变我的来源.我以为我可以使用“items [i] .src = …”或使用setAttribute,但我无法使用任何东西.

我对这一切还是比较新的,所以我可能会错过一些非常简单的东西……所以,如果有人有想法并指出我的方向,我会非常感激.

更新：
最终我们提出了这个非常简单明了的解决方案

var videoPlaying = vd1.currentSrc;
var ext = videoPlaying.substr(videoPlaying.lastIndexOf("."));
vd1.src = "jerryclips/Bild02"+ext;

解决方法:

我认为你过于复杂 – 没有必要更新多个来源,因为任何给定的浏览器都只会播放你的一个视频.如果您使用JavaScript加载新来源,则只需查询vd1的currentSrc属性,确定正在播放哪些视频并以该格式加载新视频.此时我只需删除所有源元素并将video.src设置为新值.

标签：src,javascript,html5,html5-video
来源： https://codeday.me/bug/20190929/1830879.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – HTML5视频 – 更改多个来源