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 meta标签
- html5video怎么用(html5视频媒体标签video的使用方法及完整参数说明详解)
- html5新增全局属性(HTML5自定义属性的问题分析)
- html5 video 事件(HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题)
- html5的优点是什么
- html5布局(Html5让容器充满屏幕高度或自适应剩余高度的布局实现)
- html5中提供的绘图元素(使用Html5中的cavas画一面国旗)
- html5背景怎么变色(HTML5 背景的显示区域实现)
- html5滑动刷新(HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码)
- html5本地存储功能(利用Node实现HTML5离线存储的方法)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- html5如何使用svg(将SVG图引入到HTML页面的实现)
- html5拖拽标签(Html5原生拖拽相关事件简介以及基础实现)
- html5开发图片(HTML5开发动态音频图的实现)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9