CODEWITHSUNDEEP
javascripthtmlvideoplaybackdetect
Blobfist
Blobfist

Reputation: 3

detect if specific html5 video is playing

I can't seem to get this to work. I am trying to detect if an specific html5 video with the id normalloop1 is playing.

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");
     });
 });

I assume that the problem might be, that the video with the ID normalloop1, is within which has an id itself. However, what would be a way around?

Upvotes: 0

Views: 6594

Answers (4)

Pol Ru&#233;
Pol Ru&#233;

Reputation: 354

I know two years have passed, but I just came across this question looking for another doubt.

I think the selector is wrong. I think you should use #level1 instead.

This should work:

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

Upvotes: 0

Pablo Lozano
Pablo Lozano

Reputation: 10342

Your code should be:

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

Note the # that indicates that normalloop1 is the id attribute. Without it, jQuery is looking for a tag named <normalloop1>.

Anyway, this code detect the event "start playing", but maybe the video is already playing when the event handler is added, then you can just check if the video is already playing with something like

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

}

Upvotes: 1

FrontTheMachine
FrontTheMachine

Reputation: 526

you can bind the play event on the video controller and then check which is the current selected source

Upvotes: 0

Keshpeth
Keshpeth

Reputation: 131

The problem is most likely your JQuery selector. You're going for an ID, so change this line:

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

to this:

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

Upvotes: 0

Related Questions