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();

为什么视频没有自动播放？请帮忙解决。

- lukaszkups

---

在你的代码中，你给了src两次，并且在JavaScript中使用的id是video-1，而在HTML中是video-2。 - ricky

@ricky 这个不同的id属性是我在写这个问题时犯的错误 - 抱歉，我现在已经修正了。谢谢。 - lukaszkups

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>

- Hokusai

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'); 

or

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

谢谢

- dineshkashera

---

我已经修复了问题中的div id - 那是我在编写问题时犯的错误，在我的生产代码中id是正确的 - 对此感到抱歉 :) - lukaszkups

更改了“src”使用后问题仍然存在。而且我的手动解决方案仍然有效。 - lukaszkups

您好先生， 请确认您的视频类型和源类型="video/mp4"应该相同。如果您要添加任何YouTube视频，则必须获取mp4视频链接。<source src="creativevortexlogo.mp4" type="video/mp4"> 谢谢 - dineshkashera

我很确定 - 这是本地存储的mp4视频。 - lukaszkups

您好先生， 请使用演示脚本进行视频播放<video preload="auto" autoplay controls> <source src="your_video_path" type="video/mp4"> </video> - dineshkashera