JavaScript播放按钮1启动播放按钮2的视频

我正在制作一个有两个视频的网页。我希望在点击海报图像时播放每个视频。为此，我将下面的脚本添加到每个视频中，并将每个视频的id更改为“video1”和“video2”。出于某种原因，两个视频都会播放并停止第二个视频。我不明白为什么。下面是我的代码：

HTML

您的浏览器不支持此视频。




您的浏览器不支持此视频。
剧本
var myVideo=document.getElementById（“video1”）；
函数playPause（）
{ 
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
} 
var myVideo=document.getElementById（“video2”）；
函数playPause（）
{ 
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
} 
`   
新代码
您的浏览器不支持此视频。




您的浏览器不支持此视频。
功能播放暂停（视频）
var myVideo=document.getElementById（“视频”）；
{ 
如果（myVideo.paused）
myVideo.play（）；
}否则
myVideo.pause（）；
} 
}

您遇到了问题，因为在这两种情况下，您使用相同的变量引用视频。你在代码中重复了一点，所以我试着删掉那些部分。如果您有任何问题，请告诉我

<div class="fade">
<button onclick="playPause('video1')">
<video id="video1" width="350px" height="250" poster="images/video-    
poster-2.jpg" controls>
<source src="videos/pup-head-lite-video.mp4" type="video/mp4">
<source src="videos/pup-head-lite-video.webmhd.webm" type="video/webm">
Your browser does not support this video.
</video>
</div>
<br/>
<br/>   

<div class="fade">
<button onclick="playPause('video2')">
<video id="video2" width="350px" height="250" poster="images/video-   
poster.jpg" controls>
<source src="videos/original-portable-dog-potty.mp4" type="video/mp4">
<source src="videos/original-portable-dog-potty.webm"  
type="video/webm">
Your browser does not support this video.
</video>
</div> 


<script> 

function playPause(video)
{ 
    var myVideo=document.getElementById(video); 
    if (myVideo.paused) {
        myVideo.play(); 
    } else { 
        myVideo.pause(); 
    }
    // you could consolidate the above if/else to be:
    // myVideo.paused ? myVideo.play() : myVideo.pause();

} 

</script>

您的浏览器不支持此视频。




您的浏览器不支持此视频。
功能播放暂停（视频）
{ 
var myVideo=document.getElementById（视频）；
如果（myVideo.paused）{
myVideo.play（）；
}否则{
myVideo.pause（）；
}
//如果/否则，您可以合并上述内容：
//myVideo.pause？myVideo.play（）：myVideo.pause（）；
} 

您的问题源于您对所有内容都使用相同的名称：

<script>
    var myVideo=document.getElementById("video1"); // Creates variable myVideo

    function playPause() // Creates a function called playPause
    {
      // Plays or pauses "myVideo"
    }

</script>

<script>
    var myVideo=document.getElementById("video2"); // Overrides the value of "myVideo" to point to video2 instead

    function playPause()
    {
      // Plays or pauses "myVideo"
    }
</script>

然后，您的按钮可以重写为

<button onclick="playPause('video1')">
<button onclick="playPause('video2')">

由于某些原因，两个视频都会播放并停止第二个视频。我不明白为什么。这是因为你在两个函数中使用了相同的变量…尝试为seocnd脚本将myVideo重命名为其他变量…幸运吗？我没有看到任何问题……这与我发布的答案完全相同？在我看来，事实并非如此。您的答案可以复制/粘贴并用于替换损坏的代码。我对原版中实际出现的问题有了更多的解释，以及为什么我建议的更改可以解决这个问题。这是给鱼和教鱼之间的区别。我的意思是代码实际上是一样的，从你的videoId减去我的videoId。是的，解决问题的变化是显而易见的。实际上，每个有能力的软件开发人员都会提出几乎完全相同的想法。这是一个六行函数，我想是的。如果你想的话，你也可以把它排成两行，哼，两行都不行。现在什么都不玩。我将在上面的旧代码下面添加我重新编写的代码。非常感谢你的帮助！看起来您发布的代码中有些括号已关闭…请尝试复制粘贴，或者只尝试以下两行：

var myVideo=document.getElementById（video）；我的视频暂停了？myVideo.play（）：myVideo.pause（）这是使用三元运算符…这是一种缩短if/else的简单方法：什么为您解决了它？
function playPause(videoId) {
    var myVideo=document.getElementById(videoId);

    if (myVideo.paused) {
        myVideo.play();
    } else { 
        myVideo.pause();
    } 
}

<button onclick="playPause('video1')">
<button onclick="playPause('video2')">