video下autoplay属性无效的解决方法(添加muted属性)


Posted in HTML / CSS onMay 19, 2020

背景:video下载入ogg格式视频,并设置自动播放属性autoplay,但是使用Chrome预览时,视屏画面已加载出来,但是无法自动播放,F5刷新后可以自动播放。使用火狐浏览器可以自动播放。最初代码如下:

<video autoplay="autoplay" loop="loop" class="aaa" >
    <source src="./video/exa.ogg" type="video/mp4">
</video>

找了好久原因,一直不能解决。

尝试在meta中添加http-equiv="refresh" content="2",refresh表示自动刷新,2表示没隔2s刷新。

虽然不用手动刷新,自动刷新后,视频可以自动播放,但是,每隔2s刷新,页面效果并不好啊。。。

最后autoplay无效可能有两个原因:

1.视频太大

2.视频不在根目录下

于是针对上述两个原因进行改进:

1.将ogg转为为mp4格式,并将十几M文件压缩为2、3M2.将mp4格式视频放在根目录下,并修改src路径

ps:原来的ogg文件放在根目录下,autoplay还是无效;mp4文件放在video目录下引用,autoplay还是无效。

<video autoplay="autoplay" loop="loop" class="aaa" >
    <source src="./exa.mp4" type="video/mp4">
</video>

于是,再用chrom浏览,视频终于可以自动播放了。

但是,好景不长。

不久之后这种办法又不行了。每次清理缓存之后的第一次打开页面可以自动播放,后面再打开又无法自动播放,除非再次清理缓存。

对video标签仔细研究之后,发现,有这么一个新标签muted,一开始没有并没想到muted和autoplay之间的关联。因为关于muted标签是这么解释的:

video下autoplay属性无效的解决方法(添加muted属性)

直到后来才发现:高版本浏览器,对视频静音后,可以保证视频自动播放。

所以使用最新版本浏览器的同学们需要注意一下这一点。

video下autoplay属性无效的解决方法(添加muted属性)

于是对video标签添加muted属性:

video下autoplay属性无效的解决方法(添加muted属性)

至此,每一次打开网页,视频都可以自动播放了。

到此这篇关于video下autoplay属性无效的解决方法(添加muted属性)的文章就介绍到这了,更多相关video下autoplay属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 #HTML / CSS
html5简介及新增功能介绍
May 18 #HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 #HTML / CSS
Html5在手机端调用相机的方法实现
May 13 #HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 #HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 #HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 #HTML / CSS
You might like
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
永不消失的title提示代码
2007/02/15 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
在Python中处理XML的教程
2015/04/29 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
selenium自动化测试入门实战
2020/12/21 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
美国批发供应商:Kole Imports
2019/04/10 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
测控技术与仪器个人求职信范文
2013/12/30 职场文书
打架检讨书100字
2014/01/08 职场文书
企业军训感想
2014/02/07 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
倡议书范文大全
2015/04/28 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL