video 标签 在vue中的踩坑

1. 安卓不支持自动播放
2. ios只有有controls的时候才能自动播放，所以要在mounted的时候加上controls，再在settimeout里去掉controls 代码如下：

if(this.$refs.watchVideo && this.isMobile) {
  //防止看到controls（播放按钮）
  this.$refs.watchVideo.style.opacity = '0';
  
  //开始播放视频
  this.$refs.watchVideo.play();
  
  //显示controls（播放按钮）
  this.$refs.watchVideo.setAttribute('controls','controls');
  
  this.$nextTick(() => {//在nextTick里可以拿到更新后的值
    setTimeout(() => {
      this.$refs.watchVideo.removeAttribute('controls');
      this.$refs.watchVideo.style.opacity = '1';
    },0)
  }) 
}

3. 谷歌要自动播放的话加上muted
4. 当video中的视频源存放在source中时，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。为啥？todo

• 导致的问题：在页面（有video的页面）切换页面，再切换回来，视频不会重新播放。
• 解决方法：
  1. 动态插入source标签，可以触发浏览器进行重排，从而获取相应地址的文件进行播放
  2. 不用source标签，直接将视频写在video的src上

  //有问题的写法 videoSrc为视频链接
  /**
  *video几个标签属性的解释：
  *1、playsinline：IOS浏览器支持小窗内播放
  *2、x5-playsinline：h5视频微信禁止全屏
  *3、webkit-playsinline：微信浏览器支持小窗内播放
  *4、preload：则视频在页面加载时进行加载，并预备播放
  **/
  <video ref="watchVideo" playsinline="true" x5-playsinline="true" webkit-playsinline="true"  name="media" autoplay="autoplay" loop muted :poster="videoPoster">
    <source :src="videoSrc" type='"video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
  </video>
  
  //正确的写法
  <video ref="watchVideo" preload="auto" playsinline="true" x5-playsinline="true" webkit-playsinline="true"  name="media" autoplay="autoplay" loop muted :poster="videoPoster" :src="videoSrc"></video>
  

5. 判断是否为ios和是否为微信的方法

formatUserAgent () {
  if(typeof window !== 'undefined') {
    let userAgent = navigator.userAgent
    let ua = window.navigator.userAgent;
    this.isWeixin = !!ua.match(/MicroMessenger/ig);
    this.isIOS = /iPad|iPhone|iPod/.test(userAgent) && /AppleWebKit/.test(userAgent)
  }
}

6. 兼容ios微信打开链接，视频不能自动播放的问题的方法

weixinVideoAutoPlay(video) {
  if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
    WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
      video.play();
    });
  } else {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', function () {
        video.play();
      }, false);
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', function () {
        video.play();
      });
    }
  }
}