HTML5 Video: Dynamically created video tag plays only for the first time

Question

I use JavaScript to dynamically create a video player from a given playlist dataset. Playlist data is basically a list of videos (source URL and title for each video). When the user clicks the anchor on the "download playlist", a video player is created. Here is a jsFiddle example with an example:

http://jsfiddle.net/JFpCD/

The first time the user clicks on the anchor, a video player is generated and video playback starts. However, when you click on the anchor two more times (once to close it, two to reopen it), the player is generated, but the video does not .

This issue occurs in Chrome. In Firefox, the video plays again without a problem.

I posted console.log(); inside the event listener 'loadedmetadata'. This showed me that the second time I try to upload a video, the “uploaded metadata” did NOT start.

I tried to debug this using the Network tab in the Chrome inspector, but I get some very strange results for video requests (the second time I try to open a playlist). It makes 4 attempts when receiving the .mp4 video file:

• Under the Headers tab:

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

• Under the Headers tab:

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

• Under the Headers tab:

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

• Under the Headers tab:

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

For ALL 4 attempts, there is no answer on the Response tab. Chrome doesn't even seem to end up with GET requests.

As far as I can tell, Apache handles 206 partial content requests correctly, because I can search when the video is working; Chrome sends 206 partial content requests, and the server responds accordingly.

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

EDIT:

I sent this to Chromium bug tracking and it was confirmed as a bug in Chrome: https://code.google.com/p/chromium/issues/detail?id=168810

Answer 1

I managed to implement this problem, I just forgot to come back here to add it. Obviously, the Chrome error is caused by some internal caching problem with the video. A way around this is to add a unique identifier to the video source URL. This causes Chrome to request a URL instead of trying to extract it from its internal cache. So, if you want to dynamically embed new <source> tags in an existing HTML5 <video> , 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);