uniapp中发布为H5,在微信中自动播放音频和视频。

文章介绍了如何在uniapp中发布H5应用,并使其在微信环境中实现音频和视频的自动播放。关键在于使用微信jssdk,配置innerAudioContext和videoContext,并结合WeixinJSBridge进行播放控制。音频播放相对稳定,视频播放可能需等待加载完成。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uniapp中发布为H5,在微信中自动播放音频和视频。

音频自动播放

安装微信jssdk

	npm install jweixin-module --save
页面内使用:

	var jweixin = require('jweixin-module');	//引入jssdk
	
	this.innerAudioContext = uni.createInnerAudioContext();
	this.innerAudioContext.src = '音频路径';
	this.innerAudioContext.autoplay = true;
	this.innerAudioContext.loop = true;
	this.innerAudioContext.onPlay(() => {
		console.log('开始播放');
	});
	this.innerAudioContext.onError((res) => {
		console.log(res.errMsg);
		console.log(res.errCode);
	});
	jweixin.config({}); // 模拟签名
	let that = this;
	jweixin.ready(function() {
		WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
			that.innerAudioContext.play();
		})
	})

这块最关键的就是引入jssdk!。经测试,音频自动播放效果相对稳定,兼容性也比较好。

视频自动播放

安装微信jssdk

npm install jweixin-module --save

页面内使用
<template>
	 <video  :src="src" class="video-block" autoplay="false" controls @play="playing" id="myVideo"></video>
</template>

<script>
	var jweixin = require('jweixin-module');
	playing(e){
		console.log("开始播放");
	}
	configMedia(){
		this.videoContext = uni.createVideoContext('myVideo');
		jweixin.config({}); // 模拟签名
		let that = this;
		this.$nextTick(()=>{					
			jweixin.ready(function() {
				WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
					that.videoContext.play();
				})
			})
		})
	}		

</script>

经测试,ios/安卓都可以在微信浏览器中实现自动播放。如果视频本身比较小,则可以平滑实现自动播放。如果尺寸比较大。
需要等待加载(此时可能无法自动播放)

总结:

以上均为实践经验,仅供参考。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

越来越好。

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

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

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

打赏作者

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

抵扣说明:

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

余额充值