解决微信、ios上视频无法自动播放问题

最新推荐文章于 2025-03-11 16:51:32 发布

beyondjxx

最新推荐文章于 2025-03-11 16:51:32 发布

阅读量1.1k

点赞数

文章标签：音视频

本文链接：https://blog.csdn.net/beyond520lin/article/details/134567470

版权

文章介绍了如何在微信和苹果浏览器中解决由于限制导致的视频无法自动播放的问题，通过监听WeixinJSBridgeReady事件并调用video元素的play方法实现。

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

由于微信及苹果浏览器限制无法自动播放视频，经过调试以下方法可解决。

<script>
			// 解决 ios 微信 video 自动播放
			document.addEventListener(
				'WeixinJSBridgeReady',
				function() {
					const video = document.querySelector('video');
					video && video.play();
				},
				false,
			);
		</script>

<video id="background_video" autoplay loop muted playsinline>
			<source src="/video/zz.mp4" poster="" type="video/mp4" />
		</video>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			标题
		</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#background_video {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				object-fit: cover;
				z-index: -1;
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
			// 解决 ios 微信 video 自动播放
			document.addEventListener(
				'WeixinJSBridgeReady',
				function() {
					const video = document.querySelector('video');
					video && video.play();
				},
				false,
			);
		</script>
	</head>
	<body class="jxxIndex">
		<video id="background_video" autoplay loop muted playsinline>
			<source src="video/zz.mp4" poster="" type="video/mp4" />
		</video>
	</body>

</html>