视频全屏自动播放

背景

有时候会接到一些需求，产品希望拿视频做页面的全屏背景，这时候就需要视频自动循环的播放

// vue
<video 
  ref="video" 
  :controls="false" 
  :playsinline="true" 
  :webkit-playsinline="true" 
  x5-video-player-type="h5" 
  :x5-video-player-fullscreen="true" 
  loop 
  muted 
  :show-play-btn="false" 
  :show-center-play-btn="false" 
  :enable-progress-gesture="false" 
  object-fit="cover" 
  autoplay 
  src="./aa.mp4"></video>

• laysinline="true" webkit-playsinline="true 解决ios自动播放全屏问题

• x5-video-player-type="h5" x5-video-player-fullscreen="true" 解决安卓同层级播放

• ios微信下通过 WeixinJSBridgeReady 事件进行自动播放

// 加载js资源
export function loadJS(url, callback) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  if (typeof callback === 'function') {
    script.onload = function () {
      callback();
    };
  }
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

// 自动播放
loadJS('https://res.wx.qq.com/open/js/jweixin-1.6.0.js', () => {
  setTimeout(() => {
    document.addEventListener("WeixinJSBridgeReady", () => {
      this.$refs.video.play()
    }, false);
  }, 0)
});