Javascript 播放选定的视频 功能播放视频（sourceId、targetId）{ if（typeof（sourceId）='string'）{sourceId=document.getElementById（sourceId）；} if（typeof（targetId）='string'）{targetId=document.getElementById（targetId）；} targetId.innerHTML=sourceId.innerHTML； 返回false； } 您的浏览器不支持视频标记。 您的浏览器不支持视频标记。

当视频1正在播放视频2时选择“播放视频2”将不起作用时，如何解决此问题？是否需要添加额外的脚本，以便第二个视频覆盖第一个视频？

您的

playVideo

功能的工作方式……不直观

使用

videoElement.play（）

播放视频。例如，

document.getElementById（'1'）.play（）。要停止播放视频，请使用
stop（）


功能播放视频（sourceId、targetId）{
if（typeof（sourceId）='string'）{sourceId=document.getElementById（sourceId）；}
if（typeof（targetId）='string'）{targetId=document.getElementById（targetId）；}
targetId.innerHTML=sourceId.innerHTML；
返回false；
}
您的浏览器不支持视频标记。
您的浏览器不支持视频标记。

我所做的：我将两个视频元素放在不可见的
divs
中。那些
div
具有id（1和2），并且那些
div
（您的视频元素）的内容将加载到第三个（可见的）
div
，id为6。
感谢您的快速回复。视频实际上并没有停止，当我点击视频2时，什么都没有发生，即视频1正在播放，反之亦然。这些视频确实有不同的标签。如您所见，onclick='return playVideo（“2”，“6”）'哦，对不起，我误解了这个问题。有没有办法在第一个视频完成后自动播放下一个视频？请看这里：
    <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>

<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>