Question

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

http://jsfiddle.net/JFpCD/

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

Chrome中出现此问题。在Firefox中，视频再次播放没有任何问题。

我将console.log();放在'loadedmetadata'事件侦听器中。这告诉我第二次尝试加载视频时，'loadedmetadata'没有被触发。

我尝试使用Chrome检查器中的“网络”标签对其进行调试，但我对视频请求（第二次尝试打开播放列表）收到了一些非常奇怪的结果。在GETting .mp4视频文件中进行 4次尝试：

在标题子标签下：

请求网址：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4
在标题子标签下：

请求网址：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4 请求Headersview源 Accept-Encoding：identity; q = 1，*; q = 0 范围：字节= 0- 引用者：HTTP：//fiddle.jshell.net/JFpCD/show/
在标题子标签下：

请求网址：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4
在标题子标签下：

请求网址：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4 请求Headersview源 Accept-Encoding：identity; q = 1，*; q = 0 范围：字节= 0- 引用者：HTTP：//fiddle.jshell.net/JFpCD/show/

对于所有 4次尝试，“响应”子标签中有无响应。 Chrome似乎还没有完成GET请求。

据我所知，Apache正在正确处理 206 Partial Content 请求，因为我可以在视频工作时寻找; Chrome会发送206个部分内容请求，服务器会做出相应的响应。

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

修改

我将此信息发布到了Chromium bug跟踪器，并且已被确认为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);

HTML5视频：动态生成的视频标记仅在第一次播放

1 个答案: