0

i have 5 different videos and i want them to add more then one source to them so that they can play in more browsers but im not sure on how to make it so you can do that. here is what my javascript looks like it is pretty repetitive

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

複数のソースを作成するには、ビデオのソース属性を使用するのではなく、ビデオタグ内にソース要素を含める必要があります。使用する：

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 に答える