0

我有 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";
}
4

3 回答 3

1

要创建多个来源，您需要在 video 标签内包含 source 元素，而不是使用视频的 source 属性。采用：

sourceElement=document.createElement("source")
sourceElement.source=someSource
sourceElement.type=someType
changeStuff.appendChild(sourceElement)
于 2012-12-03T21:37:23.787 回答
1

试试这个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;  }
于 2012-12-03T21:53:19.053 回答
0

您可以尝试这样的事情（未经测试，在移动设备上输入）。

function addSource(id,type,path) {

    var vid=document.getElementById(id);
    vid.innerHTML+='<source src="'+path+'" type="'+type+'">';
}
于 2012-12-03T21:46:38.100 回答