video下autoplay属性无效的解决方法(添加muted属性)_html5教程技巧

来源:脚本之家  责任编辑:小易  

默认情况下autoplay是false的,如果要让video自动播放,就要加多一个autoplay:true才行www.zgxue.com防采集请勿采集本网。

背景:video下载入ogg格式视频,并设置自动播放属性autoplay,但是使用Chrome预览时,视屏画面已加载出来,但是无法自动播放,F5刷新后可以自动播放。使用火狐浏览器可以自动播放。最初代码如下:

这现象很正常啊。页面运行后第一个视频已经自动播放了,你的代码又播放了第二个视频,当然有两个声音了。一般使用时保留一个VIDEO对象就行了。

<video autoplay="autoplay" loop="loop" class="aaa" > <source src="./video/exa.ogg" type="video/mp4"></video>

对的 controls属性是设置向用户显示控件,比如播放/暂停/定位/音量/全屏切换/字幕/音轨按钮。autoplay属性当视频在就绪后则马上播放。

找了好久原因,一直不能解决。

chrome:/flags/autoplay-policy 设置成 no user gesture is required 就好了。把浏览器的模式设置一下就可以自动播放了。因为video可能加载各种视频,自动播放会有一定的不安全性。

尝试在meta中添加http-equiv="refresh" content="2",refresh表示自动刷新,2表示没隔2s刷新。

HTML5中的video和audio标签中有一个autoplay属性,添加这个属性后就会在文件加载完成以后自动播放。具体代码如下: video: video autoplay=\"autoplay\"> 视频路径\"/> video>audio:

虽然不用手动刷新,自动刷新后,视频可以自动播放,但是,每隔2s刷新,页面效果并不好啊。。。

HTML5 是下一代的 HTML,提供了展示视频的标准,规定了一种通过 video 元素来包含视频的标准方法。纯H5页面在手机端中是无法实现自动播放,移动端浏览器大部分是禁用video和audio的autoplay功能

最后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标签添加muted属性:

至此,每一次打开网页,视频都可以自动播放了。

到此这篇关于video下autoplay属性无效的解决方法(添加muted属性)的文章就介绍到这了,更多相关video下autoplay属性内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

HTML5中的video和audio标签中有一个autoplay属性,添加这个属性后就会在文件加载完成以后自动播放。具体代码如下:video:视频路径"/>audio:视频路径"/>除此属性外还有如下属性:controls:如果出现该属性,则向用户显示控件,比如播放按钮。height:设置视频播放器的高度。loop:如果出现该属性,则当媒介文件完成播放后再次开始播放。URL:要播放的视频的 URL。preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。不与autoplay同用内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5 移动端视频video的android兼容(去除播放控件、全屏)
  • html5 video标签视频的最佳实践
  • html5自定义video标签的海报与播放按钮功能
  • html5视频媒体标签video的使用方法及完整参数说明详解
  • 详解html5中video标签那些属性和方法
  • html5 视频播放(video),javascript控制视频的实例代码
  • html5视频播放插件 video.js介绍
  • html5 video 上传预览图片视频,设置、预览视频某秒的海报帧
  • html5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
  • video结合canvas实现视频在线截图功能
  • 请问下,这里video标签已经写了autoplay,为什么不自动播放呢,是不是和我js的代码有冲突?
  • html5中的video标签的autoplay是默认属性吗?
  • jQuery如何操作video标签里面的autoplay属性
  • HTML网页中video的autoplay属性无效
  • video的autoplay出现两个音频怎么解决?
  • html5 判断题:不添加controls属性,只添加autoplay属性,也可以实现自动播放?
  • html5中我写的video为什么不能自动播放视频
  • html中怎么实现自动播放视频与音乐文件?
  • html5如何实现自动播放视频
  • 怎么让html里的播放器居中
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5videohtml5自定义video标签的海报与播放按钮功能html5视频媒体标签video的使用方法及完整参数说明详解详解html5中video标签那些属性和方法html5 视频播放(video),javascript控制视频的实例代码video结合canvas实现视频在线截图功能html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解html2canvas生成的图片偏移不完整的解决方法html5简介及新增功能介绍html5让容器充满屏幕高度或自适应剩余高度的布局实现html5在手机端调用相机的方法实现html5页面获取微信公众号的openid的方法钉钉企业内部h5微应用开发详解html5 横向滑动导航栏的方法示例html5触摸事件(touchstart、touchmove和touchend)的实html5 body设置自适应全屏iframe与window.onload如何使用详解
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved