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

					<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>

属性解释

  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)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吞掉星星的鲸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值