html5中嵌入视频自动播放的问题解决
2020-06-20 11:47
78 查看
在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嵌入视频自动播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- 解决Chrome浏览器无法自动播放音频视频的问题,Uncaught (in promise) DOMException
- 关于iphone自动播放音频和视频问题的解决办法
- 解决HTML5中的audio在手机端和微信端的不能自动播放问题
- 解决网页插入优酷视频自动播放问题
- Android Webview中解决H5的音视频不能自动播放、只有声音没有图像的问题
- h5-video3 解决html5 audio iphone,ipd,safari不能自动播放问题
- 不完全解决Android微信HTML5 播放视频的问题(不显示控制条,可交互)
- 解决html5 audio iphone,ipd,safari不能自动播放问题
- 解决微信不能自动播放HTML5网页audio问题
- 解决html5 audio iphone,ipd,safari不能自动播放问题
- Android Webview中解决H5的音视频不能自动播放的问题
- 解决在html5页面中嵌入视频时只有声音却不显示图像的问题
- iOS wkwebkit 播放HTML5 视频 全屏问题解决
- 解决苹果手机微信音频和视频不能自动播放问题
- Android Webview中解决H5的音视频不能自动播放的问题
- 解决Ubuntu SMPlayer播放视频无声音问题
- 解决IOS通过HTML5播放Video或者Audio直接输出数据的问题