Кнопка JavaScript Play 1 запускает видео для кнопки воспроизведения 2

Question

Я делаю веб-страницу, на которой есть два видео. Я хочу, чтобы каждое видео воспроизводилось при щелчке по его плакату. Для этого я добавил сценарий ниже к каждому видео и изменил идентификатор для каждого на «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, и что вы определяете только один раз 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')">