Question

每当我尝试按下按钮时，它们仅适用于其中一个视频而不是每个用于预期视频的设置。任何帮助将不胜感激。顺便说一下，我使用google chrome.Thanks：）

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

感谢：）

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

Answer 2

您在两个脚本'myVideo'中使用相同的变量名称。他们需要独一无二。此外，您有重复的功能。你应该重构它们以避免重复。

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

2 个答案: