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实现可滑动跳转的分页插件示例
May 08 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
高二美术教学反思
2014/01/14 职场文书
大学生评语大全
2014/04/18 职场文书
员工生日会策划方案
2014/06/14 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
《观潮》教学反思
2016/02/17 职场文书
导游词之西安骊山
2019/12/03 职场文书
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server