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>
