html为什么视频不能自动播放(html5中嵌入视频自动播放的问题解决)
类别:Web前端 浏览量:622
时间:2021-10-14 00:07:46 html为什么视频不能自动播放
html5中嵌入视频自动播放的问题解决在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嵌入视频自动播放内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5长按动画效果(HTML5自定义元素播放焦点图动画的实现)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- html5canvas曲线图例子(html5利用canvas实现颜色容差抠图功能)
- html5布局(Html5让容器充满屏幕高度或自适应剩余高度的布局实现)
- html5怎么将字体变为红色(Html5自定义字体解决方法)
- html5 canvas touch(html5 canvas手势解锁源码分享)
- html5播放视频的元素(HTML5在手机端实现视频全屏展示方法)
- html5的语法变化(详解HTML5.2版本带来的修改)
- php 处理html表单(PHP使用HTML5 FormData对象提交表单操作示例)
- html5实时通讯(使用Html5 Stream开发实时监控系统)
- HTML5 <figure> 、<figcaption>标签
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- html5发送文字特效(HTML5调用手机发短信和打电话功能)
- html5基础知识入门(萌新HTML5 入门指南二)
- html5怎么设置左边input(HTML5中input输入框默认提示文字向左向右移动的示例代码)
- html5做app流程(html5唤醒APP小记)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9