Check if a HTML5 video is playing using jquery

Question

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.

Answer 1

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

Answer 2

As Jquery is the framework of Javascript you can use the following code (involves Video JS Frame work):

var my_video_id = videojs('video_id');

if (my_video_id.player_.paused()) {
      my_video_id.player_.play();
} else {
      my_video_id.player_.pause();
}