uniapp中运行至微信浏览器(客户端)视频自动播放

					

属性解释

  1. v-if="isShow":用于根据 isShow 的值来判断是否显示该视频标签。如果 isShow 的值为 true,则显示视频。

  2. :id="list._id+'_'+index":为视频元素设置一个唯一的 id,通常是使用 _id(可能是视频的唯一标识符)与 index(循环索引)的组合。

  3. ref="videoPlayer":为视频元素设置一个引用名称,以便在 Vue.js 中能够通过引用操作视频元素。

  4. :muted="true":设置视频是否静音。

  5. enable-play-gesture:允许播放手势,即用户通过点击屏幕来播放/暂停视频。

  6. :controls="true":显示视频的控制条,包括播放、暂停、音量控制等。

  7. :show-center-play-btn="true":显示一个居中的播放按钮。

  8. play-btn-position="center":设置播放按钮的位置在中心。

  9. :http-cache="true":允许使用 HTTP 缓存。

  10. :show-play-btn="true":显示播放按钮。

  11. :show-fullscreen-btn="false":不显示全屏按钮。

  12. :show-loading="true":显示加载状态。

  13. enable-progress-gesture:允许使用手势来控制进度。

  14. :src="list.video_src":设置视频的源地址。

  15. @ended="ended":当视频播放结束时触发 ended 事件。

  16. @play="play(dataList[k].tv_id)":当视频开始播放时触发 play 事件,并调用 play 方法。

  17. poster-size="fill":设置海报(封面)的填充方式。

  18. object-fit="fill":设置视频的填充方式。

  19. :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'":设置视频的样式,包括宽度、高度和背景颜色。

  20. :poster="dataList[k].tv_image":设置视频的封面图片。

onLoad中添加 

页面加载时就调用自动播放,保证首次进入可以自动播放

加延时目的:防止微信浏览器检测到自动播放

			setTimeout(()=>{
				this.playVideo();   // 自动播放方法
			},1000)

onShow中添加

页面显示时延迟执行,保证跳转页面之后依然可以自动播放

			setTimeout(()=>{
				this.playVideo();
			},500)

methods中添加

自动播放方法

playVideo() {
			
				// 在这里调用播放视频的逻辑,可能需要获取视频元素并调用 play() 方法
				const videoElement = this.$refs.videoPlayer; // 获取视频元素的引用
				if (videoElement) {
					videoElement[0].play()
				}
			},

change()方法中添加

保证上下滑动视频时,仍然可以自动播放

				setTimeout(()=>{
					this.playVideo();
				},1000)

uniapp中运行至微信浏览器(客户端)视频自动播放_第1张图片

 

你可能感兴趣的:(微信,java,javascript)