Detect if any video is playing in a webpage using Jquery or/and javascript?

Question

My purpose is detected if one of the two videos are playing and console.log it. I try to build dynamic videos play detect. I read video ID when the user clicks on the play button, and then use the video ID to assign it video for addEventListner but it just works with my first video. the second video doesn't work and

$(function(){

     var videoid = "";

    $('video').bind('play', function (e) {
        videoid = $(this).attr('id');
    });

   $('video').on("click", function() {
   // test if global variable work
            console.log(videoid);
   });

  var abc = 'video1';

  document.getElementById(videoid).addEventListener('playing', function(){
    console.log('play' + videoid);
  })
  document.getElementById(videoid).addEventListener('pause', function(){
    console.log('3443');
  })

  document.getElementById(videoid).addEventListener('ended', function(){
    console.log('242434');
  })

});

what did I wrong?

http://jsfiddle.net/fbc7nn0o/51/

The `video` variable in the global scope has not been defined, and thus will fall on `document.getElementById(variableName) || document.getElementsByName(variable) || undefined` so `addEventListener` will only be called from the first ` — Kaiido, May 30 '17 at 00:55
@Kaiido This comment should be an answer (lol! I'm more used to say the opposite!) ;) — Louys Patrice Bessette, May 30 '17 at 02:22
I fixed the global variable, my goal is deal with multiple videos. — Võ Minh, May 30 '17 at 03:59
I still can not make it work in my goal, if i assign document.getElementById(abc) it work but this just deal with only one and not dynamic. it not work with document.getElementById(videoid) with videoid is a global variable. I played with @Kaiido code $('video').on({ play : console.log('play'), playing: console.log('playing'), pause: console.log('pause') }); but it run at the begin and I can not add click even. — Võ Minh, May 30 '17 at 04:05

score 4 · Answer 1 · answered May 30 '17 at 02:28

The video variable in the global scope has not been defined, and thus will fall on document.getElementById(variableName) || document.getElementsByName(variable) || undefined (cf Do DOM tree elements with ids become global variables?).

So addEventListener will only be called from the first <video> element, which as the id "video"...

What you want is

$('video').on({
  play : onplay,
  playing: onplaying,
  pause: onpause
  ...
})

where onplay, onplaying, onpause ... are event handlers functions. e.g function onplaying(e){ $('.text').fadeOut(); console.log('dfdgd'); }.

Also note that $('#'+$(this).attr('id'))[0] is perfect non-sense. Just use this.

Võ Minh · Answer 2 · 2017-05-30T04:24:27.997

It work for me.

$('video').bind('play', function (e) {

    var videoid = $(this).attr('id');

    document.getElementById(videoid).addEventListener('playing', function(){
        console.log('play' + videoid);
    });
    document.getElementById(videoid).addEventListener('pause', function(){
        console.log('3443');
    });

    document.getElementById(videoid).addEventListener('ended', function(){
        console.log('ended');
    });

});

Detect if any video is playing in a webpage using Jquery or/and javascript?

2 Answers2