加载后播放HTML5视频

我正在寻找一种在完全加载后播放html5视频的方式。视频仍在加载 - 显示视频占位符图片。在我使用setTimeout函数之前，它并没有完成这个任务。加载后播放HTML5视频

setTimeout(function() { 
    $('banner__video--fallback').fadeOut(); 
    $('.banner__video')[0].play(); 
}, 800);

那么在加载后播放视频的方式是什么？

编辑：随着解决方案'canplaythrough'视频仍然开始播放之前，其完全加载。

$('.banner__video')[0].addEventListener("canplaythrough", function() { 
    $('banner__video--fallback').fadeOut(); 
    $('.banner__video')[0].play(); 
}, false);

来源

2016-12-04 Mary Oleksiuk

的可能的复制[等到HTML5的视频负载（http://stackoverflow.com/questions/13864795/wait-until-an-html5-video-loads） – SLePort

为什么不使用HTML5视频属性？没有必要使用JavaScript。

<video autoplay poster="/placeholder.jpg"> 
    <source src="video.webm" type="video/webm"> 
    <source src="video.mp4" type="video/mp4"> 
</video>

自动播放就会开始播放视频，因为它是装载和海报分配一个图像中的视频站，而它的负荷。

你应该多看这里：http://www.w3schools.com/html/html5_video.asp

来源

2016-12-05 12:37:15

你可以用AJAX调用这样下载视频： Another: Force Chrome to fully buffer mp4 video或者只是使用canplaythrough属性。

来源

2016-12-04 08:50:31 mitch

所以即时尝试去与canplaythrough，但它已经播放之前，其完全加载 $ {'。banner__video'） .fadeOut（）; $（'。banner__video'）[0] .play（）; }，false）; –

@MaryOleksiuk是的，因为这个事件是在足够的数据加载播放时触发的。请尝试使用ajax调用（请参阅链接）。 – mitch

加载后播放HTML5视频

回答

相关问题