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>

由于加载了多个视频导致的已知Chrome错误，因此添加了

?param=。

所以我的代码中还有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

由于

HTML5视频直到源更新才会播放

2 个答案: