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制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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+APACHE实现用户论证的方法
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
OpenCV实现人脸识别
2017/04/07 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
大学毕业通用个人的求职信
2013/12/08 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
2014个人年度工作总结
2014/12/15 职场文书
初中学生操行评语
2014/12/26 职场文书
学前班学生评语
2014/12/29 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript