三.自动播放的策略

一些主流的浏览器对自动播放会有以下的规则,如 chrome， firefox ：

视频设置为静音或音量设置为0
用户与网站进行了交互，例如由用户触发的事件，如(click, tap, keypress)之类的事件里调用视频的播放
网站被列入白名单，用户在网站上使用媒体比较频繁，媒体参与度分值足够高，或者在浏览器的设置里设置了允许自动播放(如IE, safari)
在iframe的标签上设置了允许自动播放（应该需要父页面也能自动播放）

根据浏览器的自动播放策略，上面的一些问题就可以得到解释，如自动播放时没有声音是因为要静音才能自动播放，也可以说明自动播放无效，是不是没有设置静音。

在一些视频网站上能带声音自动播放，就是视频网站了多次观看视频，媒体参与度分值足够高了。

chrome自动播放策略简略截图：(详细请参考文档末尾资料的chrome自动播放策略)

四.自动播放在移动端的支持情况.

测试demo代码： https://codepen.io/zackxiong/pen/oNvqZVw

video标签设置autoplay, muted属性。测试mp4在主流浏览器自动播放的情况。(有空更新)

机型	安卓微信浏览器(7.0.13)	小米浏览器(11.11.22)	安卓QQ浏览器(10.2.1.6632)	安卓UC浏览器(12.9.7.1077)	安卓猎豹浏览器(5.20.4)	安卓Chrome浏览器(80.0.3987.119)	搜狗浏览器(5.27.8.86541)
红米k20 Prp	不能	允许	允许	不能	不能	允许	允许
小米5s

五.检测页面是否支持自动播放

基本上主流的浏览器都没有一个直接的方法，属性，或者回调去检测页面是否支持自动播放。需要从另外的方向去检测页面是否支持自动播放。

可以从play() 方法去入手， play() 会返回一个 Promise对象，如果播放失败，Promise对象的状态就会变为rejected. 这时候可以通过catch去捕捉这个错误，如果捕捉的错误是NotAllowedError，那么就可以说明页面不支持自动播放。

当然，也要注意一下浏览器的兼容性，要检测play() 返回是不是undefined.

codepen demo： https://codepen.io/zackxiong/full/wvKJbZe

六.特殊的情况

用户通过点击跳转到新页面，新页面视频设置了自动播放，此时也可以带声音自动播放，但是刷新页面后就无法自动播放了

测试demo : (暂时不方便放测试demo地址，小伙伴们可以自己写两个简单的页面，页面A通过a标签跳转到页面B, 页面B有自动播放的逻辑)

这种情况应该是由用户点击跳转的页面，新页面也符合由用户进行交互的规则。但是刷新页面就没有用户的交互了，所以也就无法自动播放。

七.自动播放的参考资料

<?php if(!Helper::isMobile()) { ?> < video id=home Video class=home- video autoplay loop muted poster=res/ video /cover.jpg> <source src=res/ video /home_ video .mp4 ty 最近公司官网需要使用视频当做banner背景且 自动播放 ，并且因为是官网需要做到 PC 端和 移动端 都可以适配 自动播放 兼容，这些问题很是头疼；得到这个需求后，开始查看各个大厂的 移动端 网站，发现很少有官网在 移动端 使用视频当做背景；正当手足无措时，无意中看到了滴滴的 移动端 官网，大家可以查看下图，这个我们看似是视频的背景，其实是由300多张图片组动态更换图片的src组成的；滴滴 移动端 网站( PC 需要F12打开控制台 -> Ctrl + Shift + M 切换到 移动端 ) 这时候会有同学问：为什么不直接放一. HTML ：注意这里的 muted ，如果不加的话，在普通的浏览器当中是不会 自动播放 的，但是存在缺陷， 自动播放 的话会默认静音。在之前的项目里，我这里的界面是用web-view嵌套在微信小程序使用的，所以就将 muted 去掉了，然后通过微信的 WeixinJSBridgeReady 方法来唤起 video 的 自动播放 ，可以实现有声播放。JS：autoPlayAudio("my Video ");funct... < video id=" video " width="180" height="314" autobuffer controls src="./sing-song.mp4" type=" video /mp4"></vi... 问题：视频设置 自动播放 ，页面加载完成时正常播放，但刷新页面后不播放，循环播放失效。 自动播放 以及循环播放的代码 < video muted autoplay="autoplay" loop="loop"> <source src="image/01.mp4" type=" video /mp4"></source> </ video >  <!--autoplay：现在如果要在页面中使用 video 标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识 HTML 5的视频，包括 video 标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。 Vide... HTML5 Video 实现浅析——基于android4.1browser1. 基本结构先上一张基本结构图，图中展示了webkit中与 HTML5 Video 实现相关的一些类。1.1DOM Tree Video 标签在webkit内部对应于 HTML Video Element类，该类的功能并不多，大多数的功能都在其父类 HTML MediaElement中。1.2Render Tree HTML V... 需求说明今天有个朋友微信上说目前他们在做抖音短视频的内容创作，方向是国家级非物质文化遗产「汝瓷」，想在他们官方网站上增加短视频的功能，将抖音的内容页上传到网站上。其实这个功能并不复杂，只需要开通上传视频功能即可，看了下后台使用的编辑器是UEditor，目前没有视频上传图标，就通过调用js实现了编辑器里的视频上传图标UEditor默认的视频支持代码视频上传后自动视频的代码如下 < video class="edui-upload- video vjs-default 要让视频 自动播放 ，需要在 HTML 代码中将视频标签的 "autoplay" 属性设置为 "autoplay"。 < video src="your_ video .mp4" autoplay></ video > < video autoplay> <source src="your_ video .mp4" type=" video /mp4">...