See if a video has been paused to upload?

Asked

Viewed 557 times

9

I’m using the shaka-player to play a Dash stream from a Nimble server, but I’ve been reading that event waiting is not always the most reliable option, and in fact when the video stops to load the image simply freezes, and my event is not being activated, so I would like to know if there is any alternative solution to know if the video has stopped to load?

I’m using Waiting this way

$("#video").bind("waiting", function(){
    $('.player-container .player-loading').show();
});
javascript jquery events video

  • When you say "pause", you refer to the paused video for being loaded (internet) or the user click pause to wait for the video to load?

  • Pause to load (internet causes / slow connection)

  • I don’t quite understand the question, but have you looked at this documentation? https://shaka-player-demo.appspot.com/docs/api/index.html

  • I’ve already taken a look, but the problem also happens sometimes even when the video is not running by Shaka-player, so I thought it would be interesting to think of a more "universal" solution to the problem

  • You can create a timer to run when the video starts and every second monitor the video time if the current one is the same as 1 second ago the video is stopped.

  • The same cannot be used with the TimeUpdate or Video Preview itself?

  • I think you are looking for this from here: http://stackoverflow.com/questions/21399872/how-to-detect-whether-html5-video-has-paused-for-buffering

Show 2 more comments

3 answers

1

Long ago I did this, I can’t find here... But, you can define . playing as a custom property for all media elements and accessing it when needed. An example:

    Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

And then use video or audio elements, like this:

if(document.querySelector('video').playing){ // checks if element is playing right now
    // Do anything you want to
}

I don’t quite understand your question, but I hope it helps. If you edit with more information, it may help.

  • 1

    This code as I understand it detects if the video is playing, correct? I need a code that detects when a video stops to load more content

0

So far after a few tests, this was the best result I could get to determine whether a video stopped or not to load content.

setInterval(
    function(){
            if ($(video)[0].paused != true && 
                !$("#video")[0].seeking && 
                 $("#video")[0].readyState >= $("#video")[0].HAVE_FUTURE_DATA) {
                    $(".player-container .player-loading").hide();
            }else{
                $(".player-container .player-loading").show();  
            }
        }, 
 300);

I do not know if this is a good method to check or not if the video stopped to load, but has met the need well.

0

Instead of using the setInteval could take advantage that this really using jQuery and adjust using onplay, onpause, onsuspend and onwaiting for something like:

function updateVideo(video) {
    var container = $(video).parents(".player-container");

    if (!video.seeking && video.readyState >= video.HAVE_FUTURE_DATA) {
        $(".player-loading", container).hide();
    } else {
        $(".player-loading", container).show();
    }
}

$(function () {
    $("#video").on("play pause suspend waiting", function(){
        if (this.timeoutCheck) {
             clearTimeout(this.timeoutCheck);
        }

        this.timeoutCheck = setTimeout(updateVideo, 1, this);
    });
});

In the example I change the selector $(".player-container .player-loading") for .parents() if there is more than one player on the page. o setTimeout+clearTimeout is to prevent events from conflicting. I also removed the video.paused to avoid showing "loading" when paused by the user

  • But the problem is that such video events do not work as expected, with jQuery mainly raised up another issue regarding this

  • @Leoletto don’t work, do they? I’m going to try it on a slow Internet, but I think the pause works well, or you’re talking about the other answer https://answall.com/q/202269/3635 ?

  • I am choosing to use the method with Pure JS for such events, since they do not work well with Ajax / jQuery, just a doubt, why call the event when using play / pause?

  • @Leoletto has nothing to do with Ajax, the play and pause being in jQuery or Javascript will be the same thing, the cool of pause is that it is fired being with suspend or Waiting. I’ll set an example without jQuery (it’s a bit complicated)

Browser other questions tagged javascript jquery events video

You are not signed in. Login or sign up in order to post.