Chrome浏览器音/视频无法自动播放

背景:由于google的一些制度,我们在写html项目时会发现刷新页面时无法自动播放audio和video,即使你添加了autoplay属性也无济于事, 但是IE和Edge浏览器是可以自动播放的。

解决方案:

本人在网上搜寻了很多方法,最后发现几个关键点:

首先是谷歌浏览器的相关政策,自从 Chrome 66 开始限制了 video 和 audio 元素的自动播放,从 Chrome 71 开始限制了 Web Audio API 的自动播放,因此一些网页游戏和 webrtc 相关的音视频项目都会相应受到影响。

推荐使用第四种。

方法一:

首先是视频自动播放的问题,常规的方法是给 video 标签增添 muted 属性

复制代码
<video
    src="xxx.mp4"
    autoplay="auto play"
    muted
    controls="controls">
</video>

这样就能静音自动播放视频了。

第二种方法:

只适用 Chrome 66 以下的版本

打开 chrome 浏览器,地址栏中输入:chrome://flags。在页面内搜索栏中写入:Autoplay policy,并将默认为"Default",修改为 "No user gesture is required" 后,重启浏览器。

Chrome 66 以上的版本貌似搜索不到 Autoplay policy ,因此无法使用第二种方法。

所以第二个办法基本不行了。

第三种方法

就是修改浏览器的设置,找到声音设置:

第一步:

第二步:添加对应的网站地址或者html 代码,允许其播放声音。

第四种

插入js代码,点击屏幕即可播放音乐,目前看来这个应该是最好的。

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景音乐示例</title>
</head>
<body>

    <h1>欢迎来到我的网站</h1>
    <!-- 插入背景音乐 -->
    <audio id="bgm" loop controls>
        <source src="sound/bgm1.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 标签。
    </audio>

<!--    点击页面播放音乐js -->
    <script>
        document.addEventListener('click', function() {
            var audioElement = document.getElementById('bgm');
            if (audioElement.paused) {  // 检查音频是否已播放
                audioElement.volume = 0.5;  // 设置音量
                audioElement.play();  // 播放音频
            }
        }, { once: true });  // 确保事件处理器只执行一次
    </script>

</body>
</html>
相关推荐
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
EasyCVR3 小时前
视频融合平台EasyCVR在智慧水利中的实战应用:构建全域感知与智能预警平台
人工智能·音视频
未来之窗软件服务4 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66686 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER6 小时前
杂记 14
前端·笔记·学习·web