加载HTML5视频后播放

玛丽·奥列克西克(Mary Oleksiuk)

我正在寻找一种完全加载html5视频后再播放的方法。并且当视频仍在加载时-显示视频占位符图像。在我使用setTimeout函数之前,但这不是实现此目的的方法。

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);
亚历山大·阿姆比雷(AlexandreAimbiré)

您为什么不只使用HTML5视频属性?不需要javascript。

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

autoplay加载后立即播放视频,并在加载时poster分配一个要在视频中站立的图像。

您应该在此处阅读更多信息:http : //www.w3schools.com/html/html5_video.asp

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

加载AJAX页面后播放的HTML5视频

来自分类Dev

完全加载后播放html5视频

来自分类Dev

HTML5视频播放器:动态加载视频

来自分类Dev

HTML5视频-开始播放后无法加载资源错误

来自分类Dev

加载后如何一起自动播放两个HTML5视频?

来自分类Dev

动态加载和播放HTML5视频

来自分类Dev

完成加载后如何使HTML5视频淡入?

来自分类Dev

HTML5视频加载

来自分类Dev

视频再次在html中播放后,循环html5视频变得黑屏

来自分类Dev

html5视频标签-加载/播放视频时出现延迟

来自分类Dev

html5视频标签-加载/播放视频时出现延迟

来自分类Dev

如何使用HTML5播放视频?

来自分类Dev

限制HTML5视频播放的次数

来自分类Dev

HTML5视频无法播放

来自分类Dev

更改HTML5视频的播放速度

来自分类Dev

无法播放HTML5中的视频

来自分类Dev

播放之前是否可以预加载整个HTML5视频源?

来自分类Dev

使用PHP将视频文件加载到html5播放器

来自分类Dev

在鼠标移开时停止播放HTML5视频(延迟加载)

来自分类Dev

多次播放后,iOS UIWebView中的HTML5视频上的MEDIA_ERR_DECODE

来自分类Dev

页面其余部分加载完成后,延迟加载html5视频

来自分类Dev

HTML5视频-在屏幕上单击播放/暂停视频

来自分类Dev

HTML5视频-在屏幕上单击播放/暂停视频

来自分类Dev

使用 Ionic-v3 加载位于设备内部的视频时,HTML5 视频播放器会出错

来自分类Dev

HTML5视频背景无法加载

来自分类Dev

减少HTML5视频的加载时间

来自分类Dev

HTML5 视频未加载

来自分类Dev

html5的视频标签后的空格

来自分类Dev

在html中设置html5视频的播放速率