html5中嵌入视频自动播放的问题解决


Posted in HTML / CSS onMay 25, 2020

在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嵌入视频自动播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 #HTML / CSS
HTML5 Blob对象的具体使用
May 22 #HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 #HTML / CSS
html5用video标签流式加载的实现
May 20 #HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 #HTML / CSS
video实现有声音自动播放的实现方法
May 20 #HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 #HTML / CSS
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
django使用admin站点上传图片的实例
2019/07/28 Python
如何完美的建立一个python项目
2020/10/09 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
求职自荐信范文格式
2013/11/29 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
国企干部对照检查材料
2014/08/22 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2015年母亲节寄语
2015/03/23 职场文书
公诉意见书范文
2015/06/05 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
python 单机五子棋对战游戏
2022/04/28 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL