网页不能自动播放视频、音频的解决方案

最新推荐文章于 2025-03-09 20:54:39 发布

skume

最新推荐文章于 2025-03-09 20:54:39 发布

阅读量3.9k

点赞数

转载请注明来源 https://utool.vip

本文链接：https://blog.csdn.net/funche/article/details/120742418

版权

前端专栏收录该内容

15 篇文章

订阅专栏

由于浏览器（尤其是基于Chromium）为保护用户体验禁止自动播放带声音的视频，大多数网站如优酷、B站采用静音自动播放并提示用户手动开启音量。实现这一功能，可以通过HTML的`<video muted>`属性结合JavaScript监听用户交互事件，如键盘按压或鼠标点击，一次性绑定事件后恢复音量播放。

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

至于原因，就是谷歌以及基于 Chromium 开发的浏览器自身限制，出发点是影响用户体验，想想也是，万一，一不小心点开哪个网页，突然播放一些乱七八糟的声音，而且特别大声，估计谁也受不了。

考虑到目前地球上绝大多数浏览器都是基于开源的 Chromium 开发，而且浏览器厂商也统一静止了自动播放，我们就不得不想办法着手解决这个问题。

先看看大厂们是怎么解决的，比如优酷、B站是可以自动播放视频的，那它们是怎么做的？

研究了一下，它们是以静音的方式开启自动播放，然后提示用户手动打开音量。

<video muted src="video.mp4" controls="controls" autoplay="autoplay" width="400" height="300" />

如果你还是觉得不爽可以这么做，当用户在当前页面按下鼠标或者任意键就恢复音量进行播放也是可行滴。

绑定 keydown 或者 mouseup 两个事件，然后可以进行处理，最好是一次性事件。这是我写的一段断码，没整理，可以借鉴下思路。

$(document).ready(function() {

	(function(window, $) {
		var events = ['keydown', 'mouseup'];
		var classes = [".pause", ".play"];
		var listener = function(event) {
			$(classes[+audio.paused], $player).click(); // 播放媒体
			events.forEach(function(e) {
				if (event.type != e) {
					$(window).unbind(e);
				}
			});
		};
		events.forEach(function(e) {
			$(window).one(e, listener);
		});
	})(window, jQuery);
});