如何使用JavaScript動態更改多個視頻源？

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();
};

更改后，源似乎根據此測試而更改。

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

在此之前，我已經回答了這個問題： 我可以使用javascript動態更改視頻的來源嗎？

您必須給源標簽賦予不同的ID，然后添加另一個document.getElementById（“ source”）。src =“ ANOTHER_SOURCE”; 在第一個之后