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自动播放mov格式视频的实例代码)
- html5如何设置标签(HTML5中在title标题标签里设置小图标的方法)
- html5中提供的绘图元素(使用Html5中的cavas画一面国旗)
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- html5基本结构图解(html5简介及新增功能介绍)
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- html5中table属性(Html5之自定义属性data-,dataset)
- 用html制作一个简易小游戏(Html5写一个简单的俄罗斯方块小游戏)
- html5的文件类型声明(浅析HTML5中的download属性使用)
- html5拖拽标签(Html5原生拖拽相关事件简介以及基础实现)
- html5自动轮播图代码(HTML5播放实现rtmp流直播)
- html5的新特性
- html5做app流程(html5唤醒APP小记)
- html5页面强制刷新(移动端html5判断是否滚动到底部并且下拉加载)
- html5弹出窗口(Html5页面上如何禁止手机虚拟键盘弹出)
- 演员陈创,火于 哮天犬 ,颠峰于 福贵 ,现状却令人唏嘘(演员陈创火于哮天犬)
- 幼小衔接-20以内看图读数 写数 数的组成练习题(幼小衔接-20以内看图读数)
- 你只要花上20天记单词,英语成绩就能从57提到100(你只要花上20天记单词)
- 夕云天际飞,亢龙化太极(夕云天际飞亢龙化太极)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
热门推荐
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- Sql Server 更新锁(UPDLOCK)
- dataframe取几列数据(dataframe 按条件替换某一列中的值方法)
- dedecms怎么加页面(dedecms自定义内容模型在首页、列表页及内容调用标签的方法)
- python opencv替换背景教程(基于OpenCV python3实现证件照换背景的方法)
- php用什么解压(php解压缩zip和rar压缩包文件的方法)
- 防火墙如何设置ftp连接(浅谈防火墙对FTP的影响及故障排除分析)
- dedecms验证码要怎么设置(DEDECMS 后台验证码图片不显示的多种解决方法)
- dedecms操作手册(织梦DEDECMS结构化数据Meta申明标签)