Play and Pause script in HTML5 video does not work

Question

I found this script here on the site. it serves to give play and pause in HTML 5 videos.

But it seems to have an error, the click and pause effect only works if you have 1 video on the page, if you have 2 videos the effect only happens in the first, the second video is necessary to play the native button of the player that is a little below. someone would know to fix it, so that the effect happens in all videos that have on the page?

 Video 01

 <video id="videoID" preload="metadata" controls="controls" width="100%" height="100%">
  <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" />
   <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" /></video>

Video 02

 <video id="videoID" preload="metadata" controls="controls" width="100%" height="100%">
 <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" />
 <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" /></video>


 --------------------
 Script
--------------------------------


 <script>
var v = document.getElementById('videoID');
v.addEventListener(
   'play', 
      function() { 
         v.play();
      }, 
    false);

   videoID.oncontextmenu = function(){ return false; };

v.onclick = function() {
  if (v.paused) {
    v.play();
    v.controls=true;
  } else {
    v.pause();
    v.controls="";
  }
};
</script>

Answer 1

At @gustavox’s suggestion in the comments, and following some good practices, let’s go to the solution:

1. NAY duplicate your IDs.

   Under no circumstances is this good practice. It should not be done at all. IDs are references to unique elements, while classes should be used for repeating elements.

2. Adjust your HTML

   Your appointment is strange, with two source within each tag, I suggest you change this:

   <video id="videoID" preload="metadata" controls="controls" width="100%" height="100%">
    <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" />
    <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" /></video>
   

   So (see that the videos now have class, and not ids.

   <video class="meus_videos" preload="metadata" controls="controls" width="100%" height="100%">
       <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" />
   </video>
   
   <video class="meus_videos" preload="metadata" controls="controls" width="100%" height="100%">
       <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4" />
   </video>
   

   Despite the attribute src be the same (I believe this is for development purposes and will change), each video should be within your tag.

3. Parameterize your function.

   As you will run the same routine in more than one video (by the way, you have to do this for what you want to work), it is interesting to make this routine a function, ie:

   function habilitar_video(_v){
       _v.addEventListener('play', function() { 
           _v.play();
       },false);
   
       _v.oncontextmenu = function(){ return false; };
       _v.onclick = function() {
           if (_v.paused) {
               _v.play();
               _v.controls=true;
           }
           else {
               _v.pause();
               _v.controls="";
           }
       };        
   }
   

With all this ready, just you pick up all the items with the class meus_videos (or whatever name they have, as long as they are the same), and dwell upon them calling the function you have created, as follows:

var videos = document.getElementsByClassName('meus_videos');
var i = videos.length;

while(i--){
    habilitar_video(videos[i]);
}

See it all working here.