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

Question

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

http://jsfiddle.net/JFpCD/

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

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

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

我尝试用Chrome的检查器中的Network选项卡来调试这个选项卡，但是对于视频的请求，我得到了一些非常奇怪的结果(这是我第二次尝试打开播放列表)。它使4在GETting .mp4视频文件上尝试：

1. 在Header子选项卡下： 请求网址：endmodreview1.mp4
2. 在Header子选项卡下： Request：endmodreview1.mp4请求Headersview源接受-编码:标识；q=1，*;q=0范围:字节=0- Referer:http://fiddle.jshell.net/JFpCD/show/
3. 在Header子选项卡下： 请求网址：endmodreview1.mp4
4. 在Header子选项卡下： Request：endmodreview1.mp4请求Headersview源接受-编码:标识；q=1，*;q=0范围:字节=0- Referer:http://fiddle.jshell.net/JFpCD/show/

对于所有4的尝试，在Response子选项卡中没有响应。似乎Chrome甚至还没有完成GET请求。

据我所知，Apache正在正确地处理206个部分内容请求，因为我可以查找视频何时工作；Chrome发送206个部分内容请求，服务器做出适当的响应。

我甚至到了启用Chrome登录，但它并没有给我任何有用的信息。

编辑：

我在Chromium跟踪器上发布了这篇文章，它已经被确认为Chrome：https://code.google.com/p/chromium/issues/detail?id=168810中的一个bug。

Answer 1

我能够实现一个解决这个问题的方法，我只是忘了回到这里来添加它。显然，Chrome错误是由视频的一些内部缓存问题引起的。解决这个问题的方法是在视频的源URL中附加一个唯一的标识符。这迫使Chrome查询URL，而不是试图从其内部缓存中检索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);