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之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
HTML页面中使两个div并排显示的实现
May 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错误和异长常处理总结
2014/03/06 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
php mysql 封装类实例代码
2016/09/18 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
jquery中post方法用法实例
2014/10/21 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
centos6.4下python3.6.1安装教程
2017/07/21 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python 字典套字典或列表的示例
2019/12/16 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
使用npy转image图像并保存的实例
2020/07/01 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
2014端午节活动策划方案
2014/01/27 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle
详解CSS3浏览器兼容
2022/12/24 HTML / CSS