检测是否正在播放特定的 html5 视频

Question

我似乎无法让它发挥作用。 我正在尝试检测是否正在播放 id 为normalloop1的特定 html5 视频。

HTML：

 <video id="level1" autoplay controls="none" class="normal-video">
 <source class="active" src="videos/intro.mp4" type='video/mp4'/>
 <source src="videos/video1.mp4" type='video/mp4'/>
 <source src="videos/video2.mp4" type='video/mp4'/>
 <source id="normalloop1" class="loop" src="videos/loop1.mp4" 
 type='video/mp4'/>
 </video>

Javascript：

 $(document).ready(function () {
     $('normalloop1').one('play', function () {
         alert("Test");
     });
 });

我认为问题可能是，ID 为normalloop1的视频本身就有一个 id。 然而，有什么办法可以解决呢？

Answer 1

你的代码应该是：

$(document).ready(function () {
     $('#normalloop1').on('play', function () {
         alert("Test");
     });
});

注意#表示normalloop1是id属性。 没有它，jQuery 正在寻找一个名为<normalloop1>的标签。

无论如何，这段代码检测到事件“开始播放”，但也许在添加事件处理程序时视频已经在播放，那么你可以检查视频是否已经在播放类似的东西

var video = $('#normalloop1').get(0);
if (!video.paused && !video.ended) {

}

Answer 2

问题很可能是您的 JQuery 选择器。 您要获取 ID，因此请更改此行：

$('normalloop1').one('play', function () {

对此：

$('#normalloop1').one('play', function () {

Answer 3

您可以在视频控制器上绑定play事件，然后检查哪个是当前选择的源

Answer 4

我知道两年过去了，但我刚刚遇到这个问题，寻找另一个疑问。

我认为选择器是错误的。 我认为你应该使用#level1代替。

这应该有效：

$(document).ready(function () {
     $('#level1').one('play', function () {
         alert("Test");
     });
 });