4

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

http://jsfiddle.net/JFpCD/

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

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

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

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

  1. 在标题子选项卡下：

    请求网址：http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4

  2. 在标题子选项卡下：

    请求 URL：http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4 请求标头查看源 Accept-Encoding:identity;q=1, *;q=0 Range:bytes=0-Referer:http:// fiddle.jshell.net/JFpCD/show/

  3. 在标题子选项卡下：

    请求网址：http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4

  4. 在标题子选项卡下：

    请求 URL：http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4 请求标头查看源 Accept-Encoding:identity;q=1, *;q=0 Range:bytes=0-Referer:http:// fiddle.jshell.net/JFpCD/show/

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

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

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

编辑：

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

4

1 回答 1

3

我能够解决这个问题，我只是忘了回到这里添加它。显然 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);
于 2013-10-10T22:07:33.580 回答