Detect If Html5 Video Element Is Playing

Detect if HTML5 Video element is playing

Note : This answer was given in 2011. Please check the updated documentation on HTML5 video before proceeding.

If you just want to know whether the video is paused, use the flag stream.paused.

There is no property for a video element in getting its playing status. But there is one event "playing" which will be triggered when it starts to play. An Event called "ended" is also triggered when it stops playing.

So the solution is:

  1. Declare one variable videoStatus.
  2. Add event handlers for different events of video.
  3. Update videoStatus using the event handlers.
  4. Use videoStatus to identify the status of the video.

This page will give you a better idea about video events. Play the video on this page and see how the events are triggered.

http://www.w3.org/2010/05/video/mediaevents.html

Detect if HTML5 video is playing or paused and show or hide a Div accordingly

To detect if your video is playing or not, you can use playing (or play) and pause events and then you can show or hide your text :

HTML :

<video id="video">
<!-- your videos -->
</video>

JS :

$(function(){

var video = $('#video')[0];

video.addEventListener('playing', function(){
$('.text').fadeOut();
})
video.addEventListener('pause', function(){
$('.text').fadeIn();
})

})

You can of course use a var to indicate your video state ( playing or not ) and then use it in another part of your code not directly inside your events handlers.

You can see this code working here.

Hope that can help.

Check if a HTML5 video element is playing

There are few methods like below,

var myVideo=document.getElementById("video1"); 
if (myVideo.paused) {
myVideo.play();
}
else {
myVideo.pause();
}

have a look at complete working example here.

How to detect when HTML5 video is played the first frame?

There is another way to do this using currentTime and defining a function for everytime the time for the video changes. Set a div on top of HTML5 video element and modify that element when currentTime is between 3 and 4 seconds.

Sample code would look like this:

HTML:

<div id="wrap_video">

<div id="video_box">
<div id="video_overlays"></div>
<div>
<video id="myVideo" width="320" height="176" controls autoplay>
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">

Your browser does not support HTML5 video.
</video>
</div>
</div>

</div>

CSS:

#video_box{
position:relative;
}
#video_overlays {
position:absolute;
width:160px;
min-height:100px;
background:transparent;
z-index:300000;
bottom:50px;
left:10px;
text-align:center;
}

JavaScript:

var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
//if currentTime is greater than 3 but less than 4, as in second 3+, go into if statement, otherwise go to else statement
if (vid.currentTime > 3 && vid.currentTime < 4) {
document.getElementById("video_overlays").innerHTML = '<p>Image Here</p>';
}
else {
document.getElementById("video_overlays").innerHTML = '';
}
}

You can inside the first if statement pause the video and then show an image and then make the video start again after a certain timeout, if that was your intention but this code is essentially the skeleton to do something like that.

Working sample: http://jsfiddle.net/l33tstealth/wgcbcf1t/10/

Detect when an HTML5 video finishes

You can add an event listener with 'ended' as first param

Like this :

<video src="video.ogv" id="myVideo">
video not supported
</video>

<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>

jQuery detect if HTML5 autoplay video plays already?

As @Bilel pointed out, there are diffent ways to do this. I've chosen the way of an "on-play-function".

which leaves me with this:

var videocontainer = '#bgvid';

jQuery(videocontainer).on('play', function() {
jQuery('.video-overlay').fadeOut(400);
});

This works fine for me, because it fades away my overlay on play and is not needed later, because the video autoplays, loops and the controls are hidden.

Check if a HTML5 video is playing using jquery

You'd use the paused property to check if the video is paused.

If it's not paused, it's playing

$("video").click(function() {
var video = $("#myvideo").get(0);

if ( video.paused ) {
video.play();
$(".play").hide();
$(".pause").show();
} else {
video.pause();
$(".play").show();
$(".pause").hide();
}

return false;
});


Related Topics



Leave a reply



Submit