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上（cf Do DOM tree elements with ids become global variables?）。

所以addEventListener只会从第一个<video>元素调用，id "video" ...

你想要的是

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

其中onplay，onplaying，onpause ...是事件处理程序函数。例如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');
    });

});

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

2 个答案: