播放选定的视频

<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

播放选定的视频

回答

相关问题