在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嵌入视频自动播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
给大家分享一个用CSS 3.0实现的文字悬停跳动特效,效果如下: 以下是代码实现,...
4月13日凌晨,NVIDIA创始人兼首席执行官黄仁勋又一次在自家厨房「举办」了一年一...
使用 Vite + React + Typescript 打造一个前端单页应用模板 最近前端大火的 Vite...
古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去理...
背景: position:sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在...
简介:Knative 是基于 Kubernetes 的开源 Serverless 应用编排框架。阿里云 Knat...
概要 本次我们会使用html5和js开发一个动态音频图 用到的技术点: (1)js (2)...
最近手机端开启了https,为了绿锁需要解决如下问题: 1、图片 2、js 3、css样式 ...
本文介绍了 Google Play 开发者政策近期的一些重要更新,您也可以通过线上培训营...
因为IOS最新版微信取消了浮窗功能,小程序后台狠毒用户反馈进入不方便了,目前公...