Script Play and Pause in HTML5 video does not work

Question

Script Play and Pause in HTML5 video does not work

Navigation

#1 by (1 votes)

0

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 on the first, the second video is necessary to play on the native button of the player that is a little below. Someone would know it, so that the effect happens in all the videos you 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>

javascript java html5 script

asked by anonymous 12.06.2015 / 03:31

1 answer

Search for records from a date to Another [closed] SQL query normalize accents, tilde

score 1 · Accepted Answer

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

DO duplicate your IDs .

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

Adjust your HTML

Your tagging 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 videos now have class , not id s.

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

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

Parametrize your function.

As you are going to run the same routine in more than one video (in fact, you have to do this so that what you want to do works), it is interesting to make this routine a function,

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 of that done, you just have to grab all the items with the class meus_videos (or any name they have, as long as they are the same), and iterate over them by calling the function you created, as follows:

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

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

See everything working here .