微信浏览器(公众号小程序),h5端,小程序 ,app端 解决video视频自动触发播放问题,

change(event) {
				this.k = event.detail.current
				setTimeout(()=>{
					this.playVideo();
				},1000)

			},

最近一直在开发h5端 和公众号小程序,一般总会遇到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">
			<swiper-item v-for="(list,index) in dataList" :key="index">
				<view v-if="k==index">
	
					<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()
				}
			}, 

2.在onload和change方法中执行:调用

change(event) {
				this.k = event.detail.current
				setTimeout(()=>{
					this.playVideo();
				},1000)

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

 不加延时器时器没有效果得,这样在微信公众号在微信浏览器中会实现自动播放

h5端 ,微信小程序 实现自动播放是可以采用获取视频上下文实现得,

    uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play(),

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序公众号H5分享卡片是指在微信公众号平台上,通过小程序H5页面来创建可分享的卡片。这种分享卡片可以包含各种信息,如标题、描述、图片、链接等,用于吸引用户点击并进入小程序H5页面。 在微信小程序中,我们可以通过设置小程序的分享参数来生成分享卡片。开发者可以在小程序的代码中,通过调用相关API来设置分享标题、描述和图片等信息,当用户点击分享按钮时,系统会自动根据设置生成分享卡片供用户分享到朋友圈、好友等渠道。 而在微信公众号H5页面中,我们可以使用微信提供的JSSDK来实现分享功能。开发者可以在H5页面中引入微信提供的JSSDK的使用,在页面加载完成后,通过调用相关API来设置分享标题、描述和图片等信息。当用户点击分享按钮时,系统会调用微信的接口生成分享卡片供用户分享。 通过微信小程序公众号H5分享卡片,用户可以将自己喜欢的小程序H5页面分享给朋友,让朋友也能够体验到这些应用的功能。而对于开发者来说,分享功能可以增加应用的曝光度和用户量,提高用户参与度和用户粘性。 总之,微信小程序公众号H5分享卡片是一种方便快捷地实现小程序H5页面分享功能的方式,能够帮助用户分享他们感兴趣的内容,也能够帮助开发者提升应用的影响力和用户数量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值