我如何為我的javascript代碼添加更多視頻源？

Question

我有5個不同的視頻，我希望他們添加更多的一個來源，以便他們可以在更多的瀏覽器中播放，但我不知道如何制作它，所以你可以做到這一點。 這是我的javascript看起來很重復

function addVideo1() {
  var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/demoreel.mp4";

}

function addVideo2() {
 var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/video1.mp4";
}

function addVideo3() {
    var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/video2.mp4";
}

function addVideo4() {
    var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/video3.mp4";

}

function addVideo5() {
    var changeStuff = document.getElementById("myVideo");
    changeStuff.src = "video/video4.mp4";
}

Answer 1

要創建多個源，您需要在視頻標記內部包含源元素，而不是使用視頻的源屬性。 采用：

sourceElement=document.createElement("source")
sourceElement.source=someSource
sourceElement.type=someType
changeStuff.appendChild(sourceElement)

Answer 2

嘗試這個jsFiddle ，它應該做你想要的。

哎呀！ 我在jQuery中做到了，抱歉。 我沒有注意。 好的，我回去用普通的'javascript做了。

HTML

<div id="video"><video></video></div>
<ul>
    <li><a href="#" data-video="video1.mp4">Video 1</a></li>
    <li><a href="#" data-video="video2.mp4">Video 2</a></li>
    <li><a href="#" data-video="video3.mp4">Video 3</a></li>
</ul>

JS

var elems = document.getElementsByTagName("a");
for (i = 0; i < elems.length; i ++) {
    elems[i].addEventListener("click", function () {
        var video = this.dataset["video"];
        var source = document.createElement("source");
        source.src = video;
        var container = document.getElementById("video");
        var v = container.firstChild;
        v.innerHTML = "";
        v.appendChild(source);
    });
}

CSS

沒有必要，只是為了“美化”它

html { padding: 10px; }
#container { width: 450px; }
#video { width: 320px; height: 240px; border: 3px solid #CCC; }
ul { margin: 10px 0; width: 320px; padding: 0; }
ul li { display: inline; margin: 0 10px 0 0; padding: 0;  }

Answer 3

您可以嘗試這樣的事情（未經測試，在移動設備上輸入）。

function addSource(id,type,path) {

    var vid=document.getElementById(id);
    vid.innerHTML+='<source src="'+path+'" type="'+type+'">';
}