最近在开发h5的项目中经常遇到video/audio等标签，在微信浏览器中遇到一些奇怪的现象，下面总结和记录一下遇到的问题，以便后面开发过程中再次遇到能够快速解决

不自动自动播放问题

video

• 微信浏览器中的video不会自动播放,即使添加autoplay属性，也不会触发自动播放，需要用户手动触发事件（click或者touch事件）才能播放。

解决方案

1. 给予用户引导，让用户手动点击触发事件，播放音频或者视频。

audio

• 在安卓手机中，audio能够通过js代码控制音频的播放，但是在ios系列中，不能自动播放，也需要用户主动触发才会播放。

解决方案

1. 音频可以在用户触摸屏幕后播放，用户不会有太大的感觉。

2. 在微信中可以通过微信 jssdk ( 需要先引入wxjssdk )注册完成后调用视频或者音频能够触发播放, 在浏览器中需要用户手动触发

(1) 监听WeixinJSBridgeReady事件

  var audio=document.querySelector("#audio");
      document.addEventListener("WeixinJSBridgeReady",function(){
      audio.play();
      },false);

ios用户第一次关注公众号，如果通过授权后回调进入该页面，jssdk注册完毕后也不会触发视频播放，需要引导用户主动触发，这一点需要注意

(2) 使用微信现在提供过的微信js-sdk 在ready中进行播放便可。(该方法暂未验证)

 wx.config({
 // 配置信息, 即使不正确也能使用 wx.ready
 　　　　debug: false,
 　　　　appId: '',
 　　　　timestamp: 1,
 　　　　nonceStr: '',
 　　　　signature: '',
 　　　　jsApiList: []
 　　});
 　　wx.ready(function() {
 　　　　document.getElementById('audio').play();
 　　});

项目演示地址 该项目中在微信环境下ios通过jssdk主动触发音频播放,第一次进入该页面需要授权后在回调到 该页面不会触发‘WeixinJSBridgeReady’事件，所以引导用户点击开始触发流程。再次进入后则自动播放，在safari浏览器中需要引导用户手动触发。

video播放自动全屏处理

• 在微信浏览器中video会自动全屏播放，并且覆盖在页面最上层。

全屏播放解决方案

设置x5-playsinline=”x5-playsinline” 属性可以不全屏播放

<video id="palyvideo"
   src="http://cdn1-jper.foundao.com/jper/app/video/2017/09/25/01b8b1fa43189a9b505d0689f2a879ab.mp4"
   autoplay
   webkit-playsinline="true"
   x-webkit-airplay="true"
   playsinline="true"
   x5-playsinline="x5-playsinline"
  >
</video>

设置后发现video终于不全屏了，现在有了新的需求需要在视频播放区域添加弹幕或者遮罩层，经过各种方法发现android微信中 视频播放器都是处于最上层(ios在不全屏的情况下，覆盖物可以出现在video播放器上层)。经过各种尝试发现以下解决方案

遮罩层覆盖在video上的解决方案

通过设置

x5-video-player-type="h5"
x5-video-player-fullscreen="true"

设置这两个属性后发现通过定位可以使遮罩层出现在播放视频的上面。但是设置x5-video-player-type=”h5”属性后android视频播放是全屏播放了.

暂未找到不全屏播放和覆盖层在video上面同时存在的完美方案。