不同场景下的情况（部分）

开发项目中经常需要插入视频切自动播放，但是在不同浏览器或不同设备上会各种各样的问题。

• chrome自动播放
  需要用户客户端模式设置成 no user gesture is required
  
  image

• 移动端自动播放

Android自动全屏，IOS不能全屏
IOS不能自动播放，Android窗口悬浮
x5内核一些特殊属性等

解决方法

为了做到适配不同的场景，我们将默认设置视频不自动播放，由js去控制播放。
虽然video标签自带有自动播放，不过一般不适用这个被各种浏览器以及设备欺负的属性，而是使用video标签自带的play()方法

例：微信端自动播放写法

//  x5-video-player-type="h5 声明启用同层H5播放器，属性必须在加载前写好
<video src="http://xxx.mp4" x5-video-player-type="h5"/>

var vi = document.getElementsByTagName('video')

document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
    // ua 判断设备
    if (ua.indexOf("iPhone") > 0) {
        // ios在数据流量的情况下  默认不允许自动播放
        setTimeout(function(){
            vi[0].play();
        },3000);
    }
    else if (ua.indexOf("Android") > 0) {
        vi[0].play();
        if ( vi[0].currentTime){
            vi[0].pause();
            //这里的定时器你可以不需要，也可以变成你需要的事件，主要是里面的play
            setTimeout(function(){
                vi[0].play();
            },3000)
        }
    }
})

开发总结

大多数情况下我们都会使用各种依赖或库来引入视频，而这些库也会有autoplay配置入口和play()方法，推荐都使用play()方法去启动视频播放，而不要用autoplay属性。
个人比较奇葩，在有充足时间的情况下不太喜欢第三方库，所以对与不同库的autoplay是什么实现机制也没去了解过，可能有些也是用play方法写的。

写在后面

由于最近比较忙，没有时间去整理各种情况，这里写的一些都是自己以前开发时候遇到的问题，所以拿出来做例子。
希望各位有其他经验也可以添加进来，或者踩到过其他坑也可以提出来大家想办法。