Javascript HTML5+；JS视频-多个播放器，每个都有自己的控件

我的页面包含两个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> 

播放/暫停



var myVideo=document.getElementById（“video1”）；
函数myVideo.playPause（）{
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
} 


播放/暫停



var myVideo=document.getElementById（“video2”）；
函数playPause（）{
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
} 

最简单的方法是将您想要的id传递到脚本中（因此您只需要脚本存在一次）：

函数播放暂停（vidId）{
var myVideo=document.getElementById（vidId）；
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
} 


播放/暫停





播放/暫停

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