HTML5 + JS video - несколько игроков, каждый со своими элементами управления

Question

Моя страница содержит два видеопроигрывателя HTML5 - каждый со своей кнопкой контроллера ниже, используя JS.

Оба набора кнопок работают только с одним из игроков (вторым) - я знаю, что мне нужно назвать каждого игрока и кнопки, но я пробовал много комбинаций и не могу заставить их работать.Код ниже…

<div style="text-align:center"> 
  <video poster="poster1.png" id="video1" width="90%">
    <source src="video1.mp4" type="video/mp4">
  </video><br>
     <button onclick="playPause()">Play/Pause</button>
  <br><br>
</div> 

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

function myVideo.playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 
</script> 



<div style="text-align:center"> 
  <video poster="poster2.png" id="video2" width="90%">
    <source src="video2.mp4" type="video/mp4">
  </video><br>
     <button onclick="playPause()">Play/Pause</button>
  <br><br>
</div> 

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

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 
</script> 

Answer 1

Самый простой способ - передать нужный идентификатор в сценарий (поэтому сценарий должен существовать только один раз):

<script> 
    function playPause(vidId) { 
        var myVideo = document.getElementById(vidId); 
        if (myVideo.paused) 
            myVideo.play(); 
        else 
            myVideo.pause(); 
    } 
</script> 

<div style="text-align:center"> 
  <video poster="poster1.png" id="video1" width="90%">
    <source src="trailer.mp4" type="video/mp4">
  </video><br>
  <button onclick="playPause('video1')">Play/Pause</button>
  <br><br>
</div> 

<div style="text-align:center"> 
  <video poster="poster2.png" id="video2" width="90%">
    <source src="trailer.mp4" type="video/mp4">
  </video><br>
  <button onclick="playPause('video2')">Play/Pause</button>
  <br><br>
</div>