CODEWITHSUNDEEP
javascriptfirefoxhtml5-videovideo.js
Darkman
Darkman

Reputation: 1

Firefox doesn't recognize if video src gets interrupted

i'm currently playing around with video.js to make video watching a bit more reliable. The current case if: while watching a video, the connection gets interrupted (loss of internet connectivity).

With chrome it was no big deal: I created a function, attached the function to the error event and voila, if an error occurred, my function was able to recover (in this case its just trying to reload the video and seek to the last known position).

On firefox nothing happened at all. The error is never raised. I tried to work around this a bit and noticed that firefox seems to think the file is fully loaded in case of a network interruption. So the bufferedPercent jumps to 1 and the loadedalldata event is also triggered. For me this seems to be just broken, but i'm unable to nail it down to a firefox or a video.js problem.

Anyone else having such problems or knows a better way to handle such problems?

Background info: to test the case, i run a HAProxy infront of two webservers running nginx who deliver the video files. To trigger my problem, i just kill the nginx which is currently delivering the stream. So a reconnect should work fine (as long as the other one is still working of course ;)

Thanks and regards, Darkman

Upvotes: 0

Views: 732

Answers (1)

Arnaud Leyder
Arnaud Leyder

Reputation: 7002

Could it be that you are binding the error on the video tag and not the source tag? As stated here:

Instead of the error event being dispatched to the media element itself, it now gets delivered to the child elements corresponding to the sources resulting in the error. 

<video controls id="videoTag" width="640" height="360" preload="auto">
<source src="pathto.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' id="mp4Source">
<source src="pathto.webm" type='video/webm; codecs="vp8.0, vorbis"' id="webmSource">
</video>
<script type="text/javascript">
document.getElementById('mp4Source').addEventListener('error', function(ev) {
alert('mp4Source error');
}, false);
document.getElementById('webmSource').addEventListener('error', function(ev) {
alert('webmSource error');
}, false);
document.getElementById('videoTag').addEventListener('error', function(ev) {
alert('videoTag error');
}, false);
document.getElementById('videoTag').addEventListener('stalled', function(ev) {
alert('videoTag stalled');
}, false);

</script>

EDIT: also check for the stalled event as it triggers when one disconnects the network while the media resource is downloading. Source.

When detecting playback/network errors on HTML5 video I normally use something that follows the code at end of this section. Thanks

Upvotes: 1

Related Questions