实操项目代码记录解决微信浏览器,H5和微信小程序视频不能自动播放问题

675 阅读1分钟

实操项目代码记录解决微信浏览器,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(), 根据实际场景加参数和使用环境,