H5中音频视频的自动播放以及同层播放问题

最新推荐文章于 2025-05-27 11:58:44 发布

李招财啊

最新推荐文章于 2025-05-27 11:58:44 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5 文章标签： H5 自动播放视频音频

本文链接：https://blog.youkuaiyun.com/weixin_39449961/article/details/80252472

本文介绍了如何在H5中处理音频和视频的自动播放问题，尤其是在移动端，由于限制通常无法直接自动播放。通过在微信的ready事件中调用video.play()或audio.play()可以实现自动播放。同时，对于视频同层播放，文章提到了微信的x5私有属性，如x5-video-player-type和x5-video-player-fullscreen等，这些属性在Android平台上用于控制视频播放方式。对于iOS平台，文章提及了相关的内联播放和airplay属性。请注意，最新的规定要求.play()方法必须在用户交互之后调用。

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

自动播放

讲真，真的很烦这个自动播放的问题，移动端是不允许自动播放的啊，但是客户就是想让自动播放，而且还不许有点击事件（哼）。但是我手里的项目很多都是在微信里转发和推送的，既然这样，我们可以在微信的ready事件里添加上video.play() or audio.play()的事件执行

首先咧，当然是要引入微信的js啦：

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

然后呢，重点来啦：

wx.ready(function () {
		audio.play();
		wx.onMenuShareTimeline({
			title: wechatShareText.title,
			link: wechatShareText.link,
			imgUrl: wechatShareText.image,
			success: function () {
			}
		});

		wx.onMenuShareAppMessage({
			title: wechatShareText.title,
			desc: wechatShareText.description,
			link: wechatShareText.link,
			imgUrl: wechatShareText.image,
			type: '',
			dataUrl: '',
			success: function () {
			}
		});
	});

完美解决哈哈哈