HTML5 Video: Dynamically generated video tag plays only first time

4
votes

I am using JavaScript to dynamically generate a video player from a given set of "playlist data." This playlist data is basically a list of videos (source URL and Title for each video). When the user clicks an anchor to "load a playlist," the video player is created. Here is a jsFiddle with an example:

http://jsfiddle.net/JFpCD/

The first time the user clicks the anchor, the video player is generated and the video starts playing. However, when you click the anchor two more times (once to close it, two to re-open it), the player is generated but the video does not play.

This problem occurs in Chrome. In Firefox, the video plays again without any problems.

I placed console.log(); inside the 'loadedmetadata' event listener. This showed me that the second time I try to load the video, the 'loadedmetadata' was NOT fired.

I have tried to debug this with the Network tab in Chrome's inspector, but I am getting some very odd results for the requests for the video (the second time I try to open the playlist). It makes 4 attempts at GETting the .mp4 video file:

  1. Under the Headers sub-tab:

    Request URL:http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4

  2. Under the Headers sub-tab:

    Request URL:http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4 Request Headersview source Accept-Encoding:identity;q=1, *;q=0 Range:bytes=0- Referer:http://fiddle.jshell.net/JFpCD/show/

  3. Under the Headers sub-tab:

    Request URL:http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4

  4. Under the Headers sub-tab:

    Request URL:http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4 Request Headersview source Accept-Encoding:identity;q=1, *;q=0 Range:bytes=0- Referer:http://fiddle.jshell.net/JFpCD/show/

For ALL 4 of the attempts, there is no response in the Response sub-tab. It seems like Chrome is not even finishing the GET requests.

As far as I can tell, Apache is handling 206 Partial Content requests properly, because I can seek when the video does work; Chrome sends 206 Partial Content requests, and the server responds appropriately.

I even went so far as to enable logging in Chrome, but it did not give me any useful information.

EDIT:

I posted this to the Chromium bug tracker, and it has been confirmed as a bug in Chrome: https://code.google.com/p/chromium/issues/detail?id=168810

1
javascripthtml5-video

1 Answers

3
votes

I was able to implement a work-around to this problem, I just forgot to come back here to add it. Apparently the Chrome bug is caused by some internal caching issue with videos. The way to get around this is to append a unique identifier to the video's source URL. This forces Chrome to query the URL instead of trying to retrieve it from its internal cache. So, if you want to dynamically insert new <source> tags into an existing HTML5 <video> tag, you do something like this:

var html = '';

var mime_type = 'video/ogg';
var src_url = 'http://your-name.com/some-video.ogv';

// Fix for Chrome video / internal caching bug.
src_url += ('?' + (new Date().getTime() / 1000));

html += '<source';

html +=     ' src="' + src_url + '"';
html +=     ' type="' + mime_type + '"';

html +=     ' />';

$('#some-video-tag').html(html);