CODEWITHSUNDEEP
htmlgoogle-chromevideo
Dale Xiao
Dale Xiao

Reputation: 1

HTML 2 videos on 1 page makes both sets of buttons only work for 1 video

Whenever i try press the buttons they only work for 1 of the videos instead of each set being used for the intended video. Any help will be appreciated. And by the way i'm usign 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>

Thanks:)

Upvotes: 0

Views: 42

Answers (2)

Musa
Musa

Reputation: 97672

You're using the same variable and functions for both videos. Use a unique variable for each video and let the functions take the video as an argument instead of duplicating them.

  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>

Upvotes: 1

Malevolence
Malevolence

Reputation: 1857

You are using the same variable name in both scripts, 'myVideo'. They need to be unique. Also, you have duplicate functions. You should refactor them to avoid duplication.

Upvotes: 0

Related Questions