How to properly handle switching html5 Videos

Question

I have come here after much trouble with something that may be only related to videos, and Is likely a bad understanding of page resources in general. What I am trying to accomplish is the ability to have a single web page in which, by clicking 'forward' and 'back' buttons, one may change the contents of a div to display one of the videos in obvious sequential order. The video is currently in mp4 format in a html5 video element.

I have tried a few methods.

• directly changing the src of the source element (does not seem to do anything)

• remove the element, and re-add it with different src. (has problem described below)

• remove the element, and use Jquery .load() to place an external html file with the entire video element in it, including a separate html file for each src. (has problem described below)

• remove the element, and re-add it with a src pointing to a download of the file from GridFS using the python flask framework. (has problem described below)

Ok, so the main issue I am having is with repeat downloads of the same video from the page. Say if you click 'next video', then 'previous video'. This causes the video to be 'black' (not loaded at all, acts like src is broken). The first time each of the videos are requested, it loads in under a second, the second time varies but is always over 10 seconds. before the content of the video pops up and it becomes playable. Google chrome's dev network tools lists the media as 'pending' while I am waiting, when when it is done waiting finally it turns the above video to red (canceled) and the new source to 'partial content'. During the wait time, it can not seem to pull anything from the server including rollover images.

I have tried this locally with flask and python simple html server, as well as on an 8 core server over gigabit Ethernet. This is not an issue of random network latency, something weird is going on.

One of the things I am trying to figure out is how making a new request to the server works with partial content. I had some idea that the browser cache would store the file so that the second time loading it should be faster, which would be optimal anyway. Does this still happen with html5 videos?

Also of note, the files are fairly small, one minute or so videos of about 20 mb. It seems like the web server is just blocking the second request for some reason and I am wondering if any of you have ever heard of this. I can post code upon request but I think the concept is pretty much straightforward.

I plan to use GridFS with flask for the final implementation of this site.

Due to the below suggestion, I have tried doing away with the source element and having the src attribute attached onto the video itself. This produces the same result. Here is the fairly simple thing I am doing:

$('#addlinks').click(function(){

    $('#maininside').remove();
    $('#maintext').append('<div id=maininside></div>');        
    $('#maininside').html('<video width="100%" controls src="/getmedia/dangerisland-01-video-01.m4v">Your browser does not support the video tag.</video>');

});

---

<article id="maintext">            

        <div id="maininside">            

        </div>       

</article>

---

The first time the button is clicked, there is a very slight delay and I can see high network usage in a monitor as the video is downloaded. Once the button is clicked again, I get no network usage for about 30 seconds in this case, then it downloads at full speed again and comes back up. Here is the dev view of network use right after it comes back up the second time:

Thank you for any insight you might have.

Answer 1

There are a lot of sub-questions and variables here; not sure how well I can address them all--but I'll give it a try.

• The comment by kalhartt steers you correct in regard to simply changing the source. But I'll note that in my experience the behavior you'll see from the various browsers as you go through this process will be inconsistent. I've done some work on this over the past year, and at least at the time it was a poor user experience--the user experienced the video as broken while the browser responds to the change in source and new load. We ended up generating new video elements and switching them out (but even this can be fraught with pitfalls due to differences in which media events each browser is publishing when.)

• I'm not positive how you're serving the videos, but the flask development server is blocking (unless you set app.run(threaded=True), I think.)

• It's also possible you're running into behavior caused by the internal video loading/caching logic in the browser, and you will even observe significant variation in how each browser handles these tasks. A good way to test against this behavior would be to append a unique query string (perhaps with a timestamp) for each load; the videos should happily load (if the server isn't blocking.) If server blocking is the issue it may be worth hosting the videos on S3 until you're ready to focus on how they're delivered.

• Another possibility is not destroying the original video object if you suspect it's going to be used again (instead you can pause it, remove it from the DOM, and save a reference to it). If re-use is an unlikely case, though, and especially if you expect the users to play many videos on a single page load, it may be best to discard them. A compromise might be retaining a fixed number of previous video objects.