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实现背景模糊的三种方式
Mar 09 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 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中变量的数据类型判断函数
2017/03/04 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
发现的以前不知道的函数
2006/09/19 Javascript
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
python如何获取服务器硬件信息
2017/05/11 Python
python实现字符串和字典的转换
2018/09/29 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
台湾良兴购物网:EcLife
2019/12/01 全球购物
个人收入证明范本
2014/01/12 职场文书
总经理岗位职责范本
2014/02/02 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
小学校长汇报材料
2014/08/20 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
办公室管理规章制度
2015/08/04 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
争做文明公民倡议书
2019/06/24 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
Golang 入门 之url 包
2022/05/04 Golang
PHP RabbitMQ消息列队
2022/05/11 PHP