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和HTML5的支持状况
Oct 31 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 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使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
jQuery Dom元素操作技巧
2018/02/04 jQuery
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python生成任意频率正弦波方式
2020/02/25 Python
python把一个字符串切开的实例方法
2020/09/27 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
JPA的特点
2014/10/25 面试题
无犯罪记录证明范本
2014/09/15 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
财会专业大学生求职信
2014/09/26 职场文书
教师群众路线心得体会
2014/11/04 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL