播放選定的視頻

<script type="text/javascript"> 
function playVideo(sourceId, targetId) { 
    if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} 
    if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);} 
    targetId.innerHTML=sourceId.innerHTML; 
    return false; 

    } 
    </script> 
<video id="6" width="320" height="240" controls="controls"></video> 

<video id="1" style="display: none;"width="320" height="240" controls="controls"> 
    <source src="movie1.mp4" type="video/mp4" /> 
    <source src="movie1.ogg" type="video/ogg" /> 
    <source src="movie1.webm" type="video/webm" /> 
Your browser does not support the video tag. 
</video> 
<video id="2" style="display: none;" width="320" height="240" controls="controls"> 
    <source src="movie2.mp4" type="video/mp4" /> 
    <source src="movie2.ogg" type="video/ogg" /> 
    <source src="movie2.webm" type="video/webm" /> 
Your browser does not support the video tag. 
</video> 


<a href="#" onclick='return playVideo("1","6")'>Play Video 1</a> 
<a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>

當選擇「播放視頻2」，而視頻1正在播放視頻2將無法正常工作，我該如何解決？是否有額外的腳本，我必須添加，以便第二個視頻將覆蓋第一個？播放選定的視頻

來源

2012-07-17 user1531828

<script type="text/javascript"> 
    function playVideo(sourceId, targetId) { 
     if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} 
     if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);} 
     targetId.innerHTML=sourceId.innerHTML; 
     return false; 
    } 
</script> 

<div id="6"></div> 

<div id="1" style="display: none"> 
    <video width="320" height="240" controls="controls"> 
     <source src="movie1.mp4" type="video/mp4" /> 
     Your browser does not support the video tag. 
    </video> 
</div> 

<div id="2" style="display: none"> 
    <video width="320" height="240" controls="controls"> 
     <source src="movie2.avi" type="video/avi" /> 
     Your browser does not support the video tag. 
    </video> 
</div> 

<a href="#" onclick='return playVideo("1","6")'>Play Video 1</a> 
<a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>

我做了什麼：我放置在看不見的divs兩個視頻元素。那些divs有ID（1 & 2）和那些divs（您的視頻元素）的內容加載到ID爲6的第三個（可見的）div。

來源

2012-07-17 13:12:24 frececroka

感謝您的快速回復。視頻並沒有實際停止，會發生什麼情況是當我點擊視頻2時什麼也沒有發生，那就是當視頻1正在播放或反過來時。視頻確實有不同的標籤。正如你可以看到onclick ='return playVideo（「2」，「6」）' – user1531828 2012-07-17 14:43:40

哦對不起，我誤解了這個問題 – frececroka 2012-07-17 14:58:39

看到我的更新。這個對我有用。 – frececroka 2012-07-17 15:14:42

您的playVideo函數的工作方式是......不直觀。

使用videoElement.play();播放視頻。例如，document.getElementById('1').play();。要停止播放視頻，使用stop();

Tutorial/docs

來源

2012-07-17 13:08:13

播放選定的視頻

回答

相關問題