首页 文章

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

提问于
浏览 次
4

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

http://jsfiddle.net/JFpCD/

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

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

我在'loadedmetadata'事件监听器中放置了 console.log(); . 这告诉我第二次尝试加载视频时，'loadedmetadata'没有被解雇 .

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

  • 在 Headers 子标签下：

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

  • 在 Headers 子标签下：

请求URL：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4请求Headersview源Accept-Encoding：identity; q = 1，*; q = 0范围：bytes = 0- Referer：http：/ /fiddle.jshell.net/JFpCD/show/

  • 在 Headers 子标签下：

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

  • 在 Headers 子标签下：

请求URL：http：//platform.mybusinesscourse.com/videos/finman3e/guidedex_finman3e_01_endmodreview1.mp4请求Headersview源Accept-Encoding：identity; q = 1，*; q = 0范围：bytes = 0- Referer：http：/ /fiddle.jshell.net/JFpCD/show/

对于 ALL 4次尝试，响应子选项卡中有 no response . Chrome似乎还没有完成GET请求 .

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

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

EDIT:

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

javascript html5-video

1 回答

  • 3

    我能够解决这个问题，我只是忘了回到这里来添加它 . 显然，Chrome错误是由视频的一些内部缓存问题引起的 . 解决此问题的方法是在视频的源URL中附加唯一标识符 . 这会强制Chrome查询URL，而不是尝试从内部缓存中检索它 . 因此，如果要在现有的HTML5 <video> 标记中动态插入新的 <source> 标记，可以执行以下操作：

    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);
    回复于

相关问题