html5中嵌入视频自动播放的问题解决


Posted in HTML / CSS onMay 25, 2020

在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~

各种查资料,找到一个方法,记录一下。核心是监听了canplaythrough事件,然后自己去让视频play()。

在这个过程中还发现,ios和安卓不一样,安卓上需要设置muted才能自动播放,ios没这个限制,当然,多媒体播放政策呢,厂商也一直在调整,需要关注。

还有就是有时候视频也可能有问题,导致不能自动播放,之前就是碰到了这个坑(在iphone8 plus,安卓上正常,但是在iPhone X,XR上不能自动播放),调了半天不行,最后发现视频的问题,日了狗了,

我这里还区分了安卓和ios,因为安卓全屏不仅丑,二期你直接返回呢不是退出视频,而是退出页面了,这个很蛋疼,ios的视频就挺好的,系统自带有操作按钮

所以安卓上取消了所有的控制按钮,ios就放开了按钮

<video v-show="os!=='iOS'"
               class="video"
               preload="auto"
               autoplay
               loop muted
               webkit-playsinline="true"
               playsinline="true"
               @loadstart="videoLoadStart"
               @canplaythrough="videoLoaded"
               poster="./images/cover.png"
               ref="videoEle"
               id="android"
        >
          <source :src="src" type="video/mp4">
 
        </video>
videoLoaded(){


this.$refs.videoEle.play();

}

说道视频,还有一个问题,之前碰到过,就是切换不同的tag然后切换视频,发现吧视频路径写在source里面,就像上面那样是有问题的,直接把连接写在video里面,就像下面这样:

<video ref="video"  id="video" preload="metadata" :src="videoSrc[videoIndex]" :poster="preSrc[videoIndex]" webkit-playsinline playsinline>
</video>


data(){
preSrc:[
  require("./images/pre1.png"),
  require("./images/video-pre.jpg")
],
videoSrc:[
  require("./images/invader-video.mp4"),
  require("./images/brithday.mp4")
],

}

到此这篇关于html5中嵌入视频自动播放的问题解决的文章就介绍到这了,更多相关html5嵌入视频自动播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 #HTML / CSS
HTML5 Blob对象的具体使用
May 22 #HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 #HTML / CSS
html5用video标签流式加载的实现
May 20 #HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 #HTML / CSS
video实现有声音自动播放的实现方法
May 20 #HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 #HTML / CSS
You might like
php预定义常量
2006/12/25 PHP
php 动态添加记录
2009/03/10 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
原生js实现日期联动
2015/01/12 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python写日志封装类实例
2015/06/28 Python
python的unittest测试类代码实例
2017/12/07 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
村捐赠仪式答谢词
2014/01/21 职场文书
销售目标责任书
2014/07/23 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
行政处罚听证告知书
2015/07/01 职场文书