1 页上的 HTML 2 视频使两组按钮仅适用于 1 个视频答案

【问题标题】：HTML 2 videos on 1 page makes both sets of buttons only work for 1 video1 页上的 HTML 2 视频使两组按钮仅适用于 1 个视频
【发布时间】：2014-09-01 09:06:49
【问题描述】：

每当我尝试按下按钮时，它们仅适用于其中 1 个视频，而不是用于预期视频的每组。任何帮助将不胜感激。顺便说一句，我正在使用谷歌浏览器。谢谢:)

<div style="text-align:center"> 
   <button onclick="playPause()">Play/Pause</button> 
   <button onclick="makeBig()">Big</button>
   <button onclick="makeSmall()">Small</button>
   <button onclick="makeNormal()">Normal</button>
    <br> 
  <video id="myVideo1" width="420">
 <source src="r8_ext.mp4" type="video/mp4">
  </video>
  </div> 

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

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

  function makeBig() { 
   myVideo.width = 560; 
  } 

   function makeSmall() { 
  myVideo.width = 320; 
  } 

   function makeNormal() { 
 myVideo.width = 420; 
 } 
  </script>





   <div style="text-align:center"> 
   <button onclick="playPause()">Play/Pause</button> 
   <button onclick="makeBig()">Big</button>
    <button onclick="makeSmall()">Small</button>
    <button onclick="makeNormal()">Normal</button>
      <br> 
  <video id="myVideo2" width="420">
    <source src="r8_int.mp4" type="video/mp4">
    </video>
 </div> 

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

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

  function makeBig() { 
    myVideo.width = 560; 
  } 

 function makeSmall() { 
   myVideo.width = 320; 
 } 

 function makeNormal() { 
   myVideo.width = 420; 
 } 
  </script>

谢谢:)

【问题讨论】：

标签： html google-chrome video

【解决方案1】：

您对两个视频使用相同的变量和函数。为每个视频使用一个唯一变量，并让函数将视频作为参数，而不是复制它们。

  var myVideo1 = document.getElementById("myVideo1"); 
  var myVideo2 = document.getElementById("myVideo1"); 
  ...
  function playPause(video) { 
  if (video.paused) 
    video.play(); 
  else 
    video.pause(); 
  } 
  ...
  <button onclick="playPause(myVideo1)">Play/Pause</button> 
  ...
  <button onclick="playPause(myVideo2)">Play/Pause</button>

【讨论】：

【解决方案2】：

您在两个脚本中使用了相同的变量名称“myVideo”。它们必须是独一无二的。此外，您有重复的功能。您应该重构它们以避免重复。

【讨论】：