Html5 video trigger “ended” event when no internet connection

Question

I am using a tag on an Android Webview. This is the code:

<div class="video-wrapper">
    <video id="video" class="video-full-screen" preload="none" webkit-playsinline poster={poster url here}>
       <source id="mp4" src="{Video Source here}" type="video/mp4">
       <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

I register the following video events:

var video = $('video');

video.bind("canplay", function(){
    console.log("canplay");
});

video.bind("playing", function(){
    console.log("playing");
});

video.bind("waiting", function(){
    console.log("waiting");
});

video.bind("ended", function(){
    console.log("ended");
});

video.bind("canplay", function(){
    console.log("canplay");
});

When I disconnect the internet before pressing video's poster, I receive the following events (after clicking the poster):

"waiting"

"canplay"

"playing"

"ended"

All of those events are happening in few seconds (the video is not playing). Tested on Samsung Galaxy S4 4.2.2.

This is obviously some kind of bag? (not happening on iOS / Nexus 4, Android 4.4)

Arnaud Leyder Arnaud Leyder · Accepted Answer · 2014-04-07T08:22:57

This seems like a puzzling chain of events. In your case scenario I think the important step is to try and grab for for the "disconnect event" as an error. Indeed the ended event does fire but it should be in conjunction with a warning/error event. You could try and bind on the error event and then take appropriate action if it happens, like displaying an error image or try to reload the video.

video.bind('error', function() {
console.log('error');
});

If it is not enough try the abort or stalled event:

video.bind('abort', function() {
console.log('abort');
});
video.bind('stalled', function() {
console.log('stalled');
});

You can read here for a description of the event. The stalled event is also described here.

Keep in mind that HTML5 video implementation is still dependent on the browser/webview manufacturer and some device will not react as expected.

Html5 video trigger “ended” event when no internet connection

1 Answers