Vue3移动端web页面video标签使用及适配（点击或自动播放）

一、视频自动播放
这个方法实践后发现在iphone端的浏览器（微信、百度、safari、谷歌上都能实现进入页面后视频自动播放）
但是在安卓手机上的微信无法自动播放（所以我第二版用的gif，但是gif比视频体积大太多，如果进行压缩的话也会很影响画质，最终还是放弃了这种方法）

// 这句加在vue项目的index.html文件中(微信的自动播放生效)
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javaScript"></script>

	<video 
      id="video"
      class="head-video" 
      muted 
      autoplay 
      preload 
      loop
      x5-video-player-fullscreen="true"
      x5-playsinline
      playsinline
      webkit-playsinline
    >
      <source src="@/assets/mImage/home/1.mp4" type="video/mp4" />
    </video>

	onMounted(() => {
      nextTick(() => {
        const video = document.getElementById('video')
        // 一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
        video.play()
        // 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
        document.addEventListener('WeixinJSBridgeReady', () => {
          video.play()
        },false)      
      })
    })

二、视频点击播放（可以先拿视频第一帧的照片放上去，点击图片后换成视频）
不直接放视频的原因，如果视频和头部导航栏共处一个div内的话，视频的层级会非常高，会盖住导航栏

   // 图片
   <div class="home-img" v-show="ifImg">
      <img src="@/assets/mImage/home/1.png" alt="" class="home-imgback">
    </div> 
   // 视频
   <video 
      v-show="!ifImg"
      id="video"
      class="head-video" 
      muted 
      loop="loop"
      autoplay
      src="@/assets/mImage/home/1.mp4"
      @click="playClick"
    >
    </video>

	// 目前是图片还是视频
	const ifImg = ref(true)
	const playClick = (() => {
      nextTick(() => {
        ifImg.value = false
        const video = document.getElementById('video')
        video.play();
      })
    })
    onMounted(() => {
      nextTick(() => {
        const video = document.getElementById('video')
        // 监听用户点击屏幕（点击屏幕后即可播放视频）
        document.addEventListener('touchstart', function(e){ 
          console.log(e.target.className);
          // 点击图片或者视频， 视频播放
          if (['home-imgback', 'head-video'].includes(e.target.className)) {
            ifImg.value = false
            video.play();
          }
        }, false)
      })
    })

	// 这种方法除了百度之外，其他视频都会放大（目前用的这个方法）
    <video 
      v-show="!ifImg" 
      id="video" 
      class="head-video" 
      x-webkit-airplay="true"  
      webkit-playsinline="true"  
      x5-video-player-type="h5" 
      x5-video-orientation="portraint" 
      loop="loop"
      preload="auto" 
      style="object-fit:fill;" 
      data-setup='{}'
      @click="playClick"
    >      
      <source src="@/assets/mImage/home/1.mp4">  
    </video> 

	// 这种方式全部浏览器都固定不放大
	<video 
      v-show="!ifImg"
      id="video"
      class="head-video" 
      autoplay 
      loop="loop"
      muted 
      x5-video-orientation="portraint"
      webkit-playsinline='true'
      playsinline='true'
      x-webkit-airplay='true'
      x5-video-player-type='h5'
      x5-video-player-fullscreen='true'
      x5-video-ignore-metadata='true'
      preload='auto'
      controls // 加了这个的话会统一出现一致的视频播放控制器
    >
      <source src="@/assets/mImage/home/1.mp4" type="video/mp4" />
      <source src="@/assets/mImage/home/1.mp4" type="video/ogg" />
      <source src="@/assets/mImage/home/1.mp4" type="video/webm" />
    </video>