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

Question

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

HTML

<div class="fade">
<button onclick="playPause()">
<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()">
<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> 

SCRIPTS

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

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

</script> 

<script> 
var myVideo=document.getElementById("video2"); 

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

</script>`   



NEW CODE

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


         </div>



<script> 

function playPause(video)
var myVideo=document.getElementById("video"); 
{ 
    if (myVideo.paused) 
    myVideo.play(); 
   }else 
    myVideo.pause(); 
} 
}

</script> 

Answer 1

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

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

Answer 2

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

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

所以当你真正调用 playPause 时，myVideo 一直被设置为指向 video2。

我建议您在调用 playPause 时传递要播放或暂停的视频的 ID，并且只定义一次 playPause - 第二个定义是完全多余的，因为它是完全相同的代码。

function playPause(videoId) {
    var myVideo=document.getElementById(videoId);

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

然后你的按钮可以重写为

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