video自动播放

html

// vue版本：vue3
<div>
 <video controls controlsList="nofullscreen nodownload" class="video"
            :poster="setData.detail.videoUrl + '?x-oss-process=video/snapshot,t_0,f_jpg,ar_auto'" ref="videoRef" autoplay
            muted x5-playsinline="true" playsinline="true" webkit-playsinline="true" preload="auto" @canplay="doAutoPlay">
            <source :src="setData.detail.videoUrl" type="video/mp4">
            您的浏览器不知处当前视频格式。
          </video>
<div class="open-voice" v-if="setData.showSetMutedBtn" @click="setMuted">取消静音</div>
<div>

javascript

<script setup>

import { ref, onMounted, reactive, onBeforeUnmount, onUpdated } from 'vue';

const setData = reactive({detail:{},showSetMutedBtn:false,...  })
const videoRef = ref(null)
/**
     * 视频自动播放兼容处理
     */
    const doAutoPlay = () => {
      if (window.WeixinJSBridge) { //微信环境
        doPlay()
      } else {
        if (hl.isweixin) {//微信
          document.addEventListener("WeixinJSBridgeReady", function () {
            doPlay()
          }, false);
        } else { //其他浏览器
          if (videoRef?.value) {
            videoRef.value.autoplay && setTimeout(() => { videoRef.value.play() }, 1000)
          }
        }
      }
    }
 /**
    * 微信内自动播放
   */
    const doPlay = () => {
      WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        if (videoRef?.value) {
          videoRef.value.play()
        }
      })
    }

  const setMuted = () => { // 资源加载问题，需要延时执行自动播放
      if (videoRef?.value) setTimeout(() => { videoRef.value.play() }, 300), videoRef.value.muted = false;
      setData.showSetMutedBtn = false
    }


</scrip>