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

Posted 2023-05-07

【中文标题】HTML5 视频：动态生成的视频标签仅第一次播放

【英文标题】：HTML5 Video: Dynamically generated video tag plays only first time

【发布时间】：2012-12-21 18:08:35

【问题描述】：

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

http://jsfiddle.net/JFpCD/

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

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

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

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

在标题子标签下：

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

在标题子标签下：

请求网址：http://platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4 请求标头view source 接受编码：身份；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 请求标头view source 接受编码：身份；q=1，*；q=0 范围：字节=0- 参考：http://fiddle.jshell.net/JFpCD/show/

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

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

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

编辑：

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

【参考方案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);

【讨论】：

所以这会强制浏览器每次从服务器请求资源，对吗？如果我会缓存它？

@steo .. 是的，这应该会强制 Chrome 每次都发出请求；因为查询字符串（?后面的东西每次都不一样）