Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Check if a HTML5 video is playing using jquery

I've written a small jquery code to override HTML 5 play function. However, I am not able to check if a video is playing or not. Here is my jquery code

$("video").click(function() {
    var video = $("#myvideo").get(0);
    video.play();
    $(".play").css("display", "none");
    return false;
});
$("#myvideo").bind("pause ended", function() {
    $(".play").css("display", "block");
});

Just give me simple tips to show a div with class="pause"(I have CSS for it) when the video is paused and pause the video as well.

like image 837
Kilvish Shakal Avatar asked Dec 30 '15 15:12

Kilvish Shakal


People also ask

How do you tell if a video is playing HTML?

You can use the . paused() method in javascript to check whether a video is playing or not. It will return true if the video is playing and return false if the video is not playing. You can get a video DOM element using its tag name or id.

What is $() in jQuery?

In the first formulation listed above, jQuery() — which can also be written as $() — searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements: 1. $( "div.

How do you check if a video is playing or paused in Javascript?

you could check for the readyState if its equal or greater than HAVE_FUTURE_DATA and paused is false. This could confirm that video is playing.


1 Answers

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;
});
like image 98
adeneo Avatar answered Sep 28 '22 11:09

adeneo