实操项目代码记录解决微信浏览器,H5和微信小程序视频不能自动播放问题
1.写微信公众号解决微信浏览器video无法自动触发播放问题, `<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false" :circular="true">
<video v-if="isShow" :id="list._id+'_'+index" ref="videoPlayer" :muted="true"
enable-play-gesture :controls="true" :show-center-play-btn="true" play-btn-position="center"
:http-cache="true" :show-play-btn="true" :show-fullscreen-btn="false" :show-loading="true"
enable-progress-gesture :src="list.video_src" @ended="ended" @play="play(dataList[k].tv_id)"
poster-size="fill" object-fit="fill"
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
:poster="dataList[k].tv_image">
</video>
<view v-if="!isShow" @click="click_tvimg()">
<image :src="dataList[k].tv_image" mode="aspectFit"
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'">
</image>
</view>
</view>
</swiper-item>
</swiper>`
写一个方法:
`playVideo() {
// 在这里调用播放视频的逻辑,可能需要获取视频元素并调用 play() 方法
const videoElement = this.$refs.videoPlayer; // 获取视频元素的引用
if (videoElement) {
videoElement[0].play()
}
}, `
在onlond和change里面调用 每次加载和滑动得时候就会自动触发,在调用时加上延时器,不然没有效果,这个方法解决了我得微信公众号视频切换和滑动自动播放问题
``
2微信小程序和H5 都使用视频上下文可以解决,
uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play(), 根据实际场景加参数和使用环境,