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

如果两个视频中有一个正在播放，则会检测到我的目的，并记录下来。 我尝试建立动态视频播放检测。 当用户单击“播放”按钮时，我读取视频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');
  })

});

我做错了什么

---

全局范围内的

视频
变量尚未定义，因此将落在
document.getElementById（variableName）| document.getElementsByName（variable）| undefined
（cf）上

因此，
addEventListener
将仅从第一个
元素调用，该元素作为
id
“video”

你想要的是

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

其中
onplay
，
onplaying
，
onpause
。。。是事件处理函数。e、 g
函数onplaying（e）{$（'.text'）.fadeOut（）；console.log（'dfdgd'）；}

还要注意，
$（'#'+$（this.attr（'id'））[0]
是完全无意义的。
只需使用
this
全局范围内的
video
变量尚未定义，因此将属于
document.getElementById（variableName）| document.getElementsByName（variable）| undefined
（cf）

因此，
addEventListener
将仅从第一个
元素调用，该元素作为
id
“video”

你想要的是

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

其中
onplay
，
onplaying
，
onpause
。。。是事件处理函数。e、 g
函数onplaying（e）{$（'.text'）.fadeOut（）；console.log（'dfdgd'）；}

还要注意，
$（'#'+$（this.attr（'id'））[0]
是完全无意义的。
只需使用
这个
它对我有用

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

});

这对我有用

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

});

全局范围中的
video
变量尚未定义，因此将属于
document.getElementById（variableName）| document.getElementsByName（variable）| undefined
因此
addEventListener
将仅从第一个
元素调用，该元素作为
id
视频。。。您需要的是
$（'video'）。on（{play:onplay，play:onplay，pause:onpause…}）
其中
onplay
，
onplaying
。。。是事件处理函数（
函数onplaying（e）{$（'.text'）.fadeOut（）；console.log（'dfdgd'）；}
）。还要注意，
$（'#'+$（this.attr（'id'））[0]
是完全无意义的。用
这个
@kaido这个评论应该是一个答案（哈哈！我更习惯于说相反的！）我修正了全局变量，我的目标是处理多个视频。如果我分配document.getElementById（abc），我仍然无法使其在我的目标中工作，但这只处理一个，而不是动态的。它不适用于文档。带有videoid的getElementById（videoid）是一个全局变量。我在（{play:console.log（'play'）、playing:console.log（'playing'）、pause:console.log（'pause'））上玩了@kaido code$（'video'）；但是它在开始时运行，我无法添加click-even。全局范围中的
video
变量尚未定义，因此将落在
document上。getElementById（variableName）| document.getElementsByName（variable）| undefined
因此
addEventListener
将仅从第一个
元素调用，它作为
id
视频。。。您需要的是
$（'video'）。on（{play:onplay，play:onplay，pause:onpause…}）
其中
onplay
，
onplaying
。。。是事件处理函数（
函数onplaying（e）{$（'.text'）.fadeOut（）；console.log（'dfdgd'）；}
）。还要注意，
$（'#'+$（this.attr（'id'））[0]
是完全无意义的。用
这个
@kaido这个评论应该是一个答案（哈哈！我更习惯于说相反的！）我修正了全局变量，我的目标是处理多个视频。如果我分配document.getElementById（abc），我仍然无法使其在我的目标中工作，但这只处理一个，而不是动态的。它不适用于文档。带有videoid的getElementById（videoid）是一个全局变量。我在（{play:console.log（'play'）、playing:console.log（'playing'）、pause:console.log（'pause'））上玩了@kaido code$（'video'）；但它运行在开始，我不能添加甚至点击。