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 相关文章推荐
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
详解CSS故障艺术
May 25 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/02/16 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
jquery延迟对象解析
2016/10/26 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python实现简单状态框架的方法
2015/03/19 Python
Python栈类实例分析
2015/06/15 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
十月围城观后感
2015/06/08 职场文书
安全教育的主题班会
2015/08/13 职场文书
严以律己学习心得体会
2016/01/13 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript