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

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

看到这个link： http://www.w3schools.com/tags/tag_video.asp.

从此 link 获取更多视频设置： 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

谢谢

Answer 2

我怀疑问题出在 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>

HTML5 源更新前视频无法播放

HTML5 video doesn't play until source update

html

javascript

video-streaming

html5-video

cordova