我如何將更多的視頻源添加到我的JavaScript代碼？

我有5個不同的視頻，我希望他們添加更多，然後一個來源給他們，讓他們可以在更多的瀏覽器播放，但我不知道如何讓它可以做到這一點。這裏是我的JavaScript是什麼樣子它是相當重複我如何將更多的視頻源添加到我的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"; 
}

來源

2012-12-03 zac

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

ARGH！我在jQuery中做到了，對不起。我沒有注意。好吧，我回到了原始ol'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>

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-03 21:53:19

我沒有提及，我有五個不同的按鈕，當你點擊按鈕的視頻彈出，我有一個視頻標籤，以便當你點擊它們時，它在那個地方 – zac

謝謝爲幫助的人 – zac

要創建多個源，您需要有視頻標籤內源元素，而不是使用視頻的源屬性。使用：

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

來源

2012-12-03 21:37:23 Jack

這是我在我的HTML '<視頻ID = 「爲myVideo」源SRC = 「視頻/ demoreel.mp4」類型= 「視頻/ MP4」控制自動播放>

\t Demo Reel Video1 \t \t Video2 \t \t Video3 Video4 \t

' – zac

和JavaScript現在起作用addVideo1（）{ sourceElement =使用document.createElement（「源」） sourceElement.source = 「視頻/ demoreel.ogv」 sourceElement.type = 「視頻/遠洋船」 changeStuff.appendChild（sourceElement） } – zac

它不會工作仍然是什麼我做錯了嗎？ – zac

你可以嘗試這樣的事情（未經測試，在手機上輸入）。

function addSource(id,type,path) { 

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

來源

2012-12-03 21:46:38 FrancescoMM

我如何將更多的視頻源添加到我的JavaScript代碼？

回答

相關問題