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一直设置为指向视频2。

我建议您在调用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')">