Question

我正在尝试使用onclick事件动态更改视频源。

这是HTML：

<video autoplay loop poster="1.jpg" id="bg">
    <source src="/static/media/1.webm" type="video/webm">
    <source src="/static/media/1.mp4" type="video/mp4">
</video>

在onclick我生成一个随机链接，然后我更改了<video>元素的来源：

window.onclick = function() {
    var randint = Math.floor(Math.random() * 10) + 1;
    var srcmp4 = "http://127.0.0.1:8888/static/media/" + randint.toString() + ".mp4";
    document.getElementById('bg').src=srcmp4;
};

如果我尝试以相同的方式访问源元素，则为其指定一个id：

<source id="webmid" src="/static/media/1.webm" type="video/webm">

我得到了空。

我想动态更改.jpg，.webm，.mp4链接。如何通过JS访问和分配视频标签内的多个源元素？

Answer 1

视频标记缺少宽度，高度和控件属性。试试这个：

<video width="320" height="240" id="bg" autoplay loop controls>
  <source src="/static/media/1.webm" type="video/webm">
  <source src="/static/media/1.mp4" type="video/mp4">
</video>

另外这里是新的js：

window.onclick = function() {
  var randint = Math.floor(Math.random() * 10) + 1;
  var srcmp4 = "http://127.0.0.1:8888/static/media/" + randint.toString() + ".mp4";
  var video = document.getElementById('bg');
  var source = document.getElementByTagName('source');
  source = srcmp4;
  video.load();
};

更改后，源似乎根据this测试更改。

Answer 2

所以我做了一些阅读。首先，我尝试删除video的子项，创建新的source元素并附加到video，所有内容都在页面源中工作，但是视图没有呈现任何更改。因此，我按照.canPlayType路由确定客户是否支持.webm，如果不支持，则将mp4 src直接分配给video元素。还添加了小修复，因此随机生成的数字不会重复。加载页面时加载随机视频，之后加载点击事件。这是代码，它是一团糟：

<video autoplay loop poster="" id="bg">
</video>

<script type="text/javascript">
function randlink(a,b){
// generate random int in range of a,b. return str
var c = Math.floor(Math.random()*b)+a;
return "/static/media/"+c.toString();
}

//assign video new random src and poster on page load
window.onload = function(){
var bgvid = document.getElementById('bg');
var randbase = randlink(1,10);
bgvid.poster = randbase + ".jpg";
//check if webm, else mp4 src
if(bgvid.canPlayType('video/webm; codecs="vp8, vorbis"') != ""){
bgvid.src = randbase+".webm";
} else { bgvid.src = randbase+".mp4"}

//change src and poster on click
window.onclick = function() {
var randbase2 = randlink(1,10);
//check if unique
do{
randbase2 = randlink(1,10)
} while (randbase2 == randbase);
randbase = randbase2;
bgvid.poster = randbase2 + ".jpg";
var webmstr = ".webm";
//check if previous was webm, else mp4
if(bgvid.src.indexOf(webmstr) > 0){
bgvid.src = randbase2 +".webm";
}else{
bgvid.src = randbase2 +".mp4";
}}
};

Answer 3

我在此之前已经回答了这个问题：Can I use javascript to dynamically change a video's source?

您必须为源标记提供不同的ID，然后添加另一个document.getElementById（＆＃34; source＆＃34;）。src =＆＃34; ANOTHER_SOURCE＆＃34 ;;在第一个之后

如何使用JavaScript动态更改多个视频源？

3 个答案: