I'm using shaka-player to play a dash stream from a Nimble server, but I've been reading that waiting event is not always the most reliable option, and in fact when the video stops loading the image simply freezes, and my event is not being activated, so I wonder if you have any workarounds to see if the video stopped loading?
I'm using waiting this way
$("#video").bind("waiting", function(){
$('.player-container .player-loading').show();
});
I have long ago done this, I can not find it here ... But, you can set .playing as a custom property for all media elements and access 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 do not quite understand your doubt, but hope it helps. If you edit with more information, it can help.
So far after a few tests, this was the best result I was able to determine whether a video stopped loading 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'm not sure whether this is a good method to check whether or not the video has stopped loading, but it has met the need.
Instead of using setInteval you could take advantage of the fact that you are actually using jQuery and adjust using onplay , onpause , onsuspend and onwaiting to 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 $(".player-container .player-loading") selector to .parents() , perhaps there is more than one player on the page. setTimeout + clearTimeout is to prevent events from conflicting. I also removed video.paused to prevent it from displaying "loading" when paused by the user