HTML5 视频在源更新之前无法播放

Question

我有一个 HTML5 播放器，它是我的移动 (cordova) 应用程序的一部分：

<video width="100%" height="100%" id="video-1" src="/mnt/sdcard/xyz-media/xyz.mp4?param=8zw6y" preload="none">
  <source src="/mnt/sdcard/xyz-media/xyz.mp4?param=8zw6y" type="video/mp4">
</video>

?param= 是由于加载多个视频导致的已知 Chrome 错误而添加的。

所以我的代码中还有canplaythrough 事件：

var videoWrapper = document.getElementById('video-1');

videoWrapper.addEventListener('canplaythrough', function(){
  videoWrapper.play();
});

但视频从不播放。当我尝试手动执行它时它也不起作用，但是当我手动重新加载 src 属性然后尝试播放时 - 它起作用了：

var src = document.getElementById('video-1').getAttribude('src');
document.getElementById('video-1').setAttribute('src', src);
document.getElementById('video-1').play();

为什么不刷新就无法播放视频？请帮忙。

Answer 1

我怀疑问题出在preload 属性上。您已将其配置为none，因此浏览器在页面加载时不会加载视频。使用auto 应该可以。

<video width="100%" height="100%" id="video-1" preload="auto">
  <source src="/mnt/sdcard/xyz-media/xyz.mp4?param=8zw6y" type="video/mp4">
</video>

Answer 2

我认为您在视频标签的错误位置使用了src，在该位置您可以使用控件。

查看此链接： http://www.w3schools.com/tags/tag_video.asp.

从此链接获取更多视频设置： https://developer.mozilla.org/en/docs/Web/HTML/Element/video

希望对你有帮助。

还要确保您为视频标签编写了正确的#id。

var videoWrapper = document.getElementById('video-1'); 

或

var videoWrapper = document.getElementById('video-2');// Correct One

谢谢