场景
我有一个视频元素：
<video class="media video" src="http://localhost:3000/uploads/medias/2014/08/11/nahNYjjysJBuwSsxj_2" loop></video>
使用jQuery，我可以将其移动到DOM中（附加和分离它）。
有时，在新的附加操作（使用
$.appendTo ）之后，视频会变成黑色，并且无法通过编程方式播放它。也就是说：即使我尝试以下操作也无法成功：var video = $('video')[0]; // using jQuery I get the reference to the DOM element
video.load(); // nothing happens
video.play(); // nothing happens
video.pause(); // nothing happens
我也在它上面有一个监听器。
$('video').on('canplay', function () {/*...*/});
这个代码从未被触发。
我尝试将URL更改为：
v.src = v.src + '?cache_bust=true';
// then
v.load(); v.play();
但是却没有任何反应。
注记
- 页面上有多个4-5个视频元素，我用类似的方式移动它们
- 我总是将
video元素附加到可见区域，然后尝试播放它们 - 服务器设置支持范围请求和缓存。
在正常情况下，它们看起来像：
在失败的情况下，请求如下：
Chrome 显示pending，服务器永远不会报告进入的请求。
问题
- 有人遇到过这个/相似的问题吗？
- 是否存在其解决方法？
- 如果没有：是否存在可靠的解决方法？
发现（更新）
随着我深入挖掘。我意识到这可能是一个Chrome/ium问题。因此，我找到了以下页面：
所有这些都显示出存在已经持续1.5-4年的错误。看起来不太乐观。因此，我将深入搜索替代方案，并尝试以下方法：
- 禁用视频缓存
- 在每个视频隐藏时使用
video.src = null; video.load(); - 禁用
byte ranges
.load函数中添加某种回调，例如.load(function(){ console.log(1)})。顺便问一下，localhost:3000，这是RoR应用程序吗？ - Y.PuzyrenkoHAVE_NOTHING）。这是一个meteor应用程序。服务支持缓存和范围请求。现在我正在禁用视频缓存，以查看问题是否仍然存在。主要问题是很难复制该问题，因为它只会偶尔发生。 - Matyas