使用Jquery或/和javascript检测网页中是否正在播放任何视频？

Question

如果两个视频之一正在播放并进行控制台，则检测到我的目的。 我尝试构建动态视频播放检测。 当用户单击播放按钮时，我读取了视频ID，然后使用该视频ID为addEventListner为其分配了视频，但它仅与我的第一个视频一起使用。 第二个视频不起作用，

$(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');
  })

});

我怎么了

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

Answer 1

全局范围内的video变量尚未定义，因此将落在document.getElementById(variableName) || document.getElementsByName(variable) || undefined document.getElementById(variableName) || document.getElementsByName(variable) || undefined document.getElementById(variableName) || document.getElementsByName(variable) || undefined （参见具有ID的DOM树元素是否成为全局变量？ ）。

因此， addEventListener将仅从第一个<video>元素（其id "video"调用...

你想要的是

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

其中onplay ， onplaying ， onpause ...是事件处理函数。 例如function onplaying(e){ $('.text').fadeOut(); console.log('dfdgd'); } function onplaying(e){ $('.text').fadeOut(); console.log('dfdgd'); } function onplaying(e){ $('.text').fadeOut(); console.log('dfdgd'); } 。

还要注意， $('#'+$(this).attr('id'))[0]是完全无意义的。 只是使用this 。

Answer 2

它对我有用。

$('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');
    });

});