javascript - HTML5 视频 : Dynamically generated video tag plays only first time

Question

我正在使用 JavaScript 从一组给定的“播放列表数据”动态生成视频播放器。这个播放列表数据基本上是一个视频列表(每个视频的源 URL 和标题)。当用户单击 anchor 以“加载播放列表”时，将创建视频播放器。这是一个带有示例的 jsFiddle:

http://jsfiddle.net/JFpCD/

用户第一次点击 anchor 时，会生成视频播放器并开始播放视频。但是，当您再次单击 anchor 两次(一次关闭它，两次重新打开它)时，会生成播放器，但视频不会播放。

这个问题发生在 Chrome 中。在 Firefox 中，视频再次播放没有任何问题。

我将 console.log(); 放在“loadedmetadata”事件监听器中。这表明我第二次尝试加载视频时，“加载的元数据”没有被触发。

我尝试使用 Chrome 检查器中的“网络”选项卡对此进行调试，但我得到了一些非常奇怪的视频请求结果(我第二次尝试打开播放列表)。它在获取 .mp4 视频文件时进行了 4 次尝试:

1. 在标题子选项卡下:

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

2. 在标题子选项卡下:

   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. 在标题子选项卡下:

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

4. 在标题子选项卡下:

   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/

对于 ALL 4 次尝试，“响应”子选项卡中没有无响应。 Chrome 似乎甚至没有完成 GET 请求。

据我所知，Apache 正在正确处理 206 部分内容 请求，因为我可以在视频播放时进行搜索； Chrome 发送 206 部分内容请求，服务器做出适当响应。

我什至走到了enable logging in Chrome , 但它没有给我任何有用的信息。

编辑:

我将此发布到 Chromium 错误跟踪器，并已确认它是 Chrome 中的错误: https://code.google.com/p/chromium/issues/detail?id=168810

Answer 1

我能够对这个问题实现变通方法，只是忘了回来添加它。显然，Chrome 错误是由视频的一些内部缓存问题引起的。解决此问题的方法是将唯一标识符附加到视频的源 URL。这会强制 Chrome 查询 URL，而不是尝试从其内部缓存中检索它。所以，如果你想动态插入新的 <source>标记到现有的 HTML5 <video>标签，你做这样的事情:

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);