如何解决浏览器音视频video/audio设置自动播放autoplay无效问题？

2024-05-20 07:20:54

问题背景：

项目需要在用户初始化登录进去时，查看消息列表，有消息则需提示消息提示音，这就需要解决浏览器音视频无法设置自动播放问题。

解决方案：

1、首先造成这个问题的原因在于chrome浏览器为了防止网页广告，在2018年取消了自动播放功能，需要手动配置。

配置分新旧版本：

旧版本：

（1）在浏览器搜索框中输入：chrome://flags/ （2）在上图页面搜索框中输入 Autoplay 搜索

（3）找到 Autoplay policy 项，将默认值 Default修改成下拉框中 No user gesture is required

（4）点击右下角 Relaunch Now 按钮，保存设置即可。

新版本：

针对新版本，在上述第二步搜索 Autoplay 会搜索不到，如下图，

此时，可点击页面地址栏左侧符号，将下图麦克风和声音都改为允许即可，如下图

2、配置了解决浏览器禁止autoplay政策后，问题并没有解决，这个时候使用 video/audio 会发现，报错如下：

这个报错，是需要先有实质的界面上的dom操作，才可以正常播放（随便在界面上点一下，既可以正常播放，但一定要有这个点击或是其他操作了dom的动作），显然还是无法满足我们初始化播放的需求。

（分割线，下方一定要看）

在经历了上面的问题后，接下来回归正题：

（1）第一步，新建一个div容器，如下：

<div id='audioPay'></div>

注意：不要设置display:none；否则会无法播放声音，可以对音频设置hidden属性

（2）js中向容器中插入音频容器：

function play(src,type){$("<embed id='embVoice' name='embed_"+type+"' src='"+src+"' autostart=true  hidden=true muted='muted'></embed>").appendTo("#audioPay");var interTimePay = setInterval(function (){try{var embedVoice = document.getElementById('embVoice');if (!embedVoice) {$("<embed id='embVoice' name='embed_"+type+"' src='"+src+"' autostart=true  hidden=true muted='muted'></embed>").appendTo("#audioPay");}setTimeout(function() {$('#embVoice').remove();}, 9000)}catch(e){console.log("播放声音出现异常！", e);}},10000);}var src="video.mp3";var type="type";play(src,type);

这里用的是 embed 媒体标签，原理是，播放的时候插入embed 标签，不需要播放的时候移除 embed 标签。

以上，便可以完美实现初始化播放音频了，视频同理，且测试过360浏览器极速和兼容模式，都可以完美播放哦~

@有用的话，给个小心心♥(ˆ◡ˆԅ)吧~@

如何解决浏览器音视频video/audio设置自动播放autoplay无效问题？相关推荐

自动点击器如何设置最快_微视APP如何设置自动播放视频-微视APP设置自动播放视频的方法...
微视APP是一款功能实用的短视频软件,在手机上安装这款软件之后就可以在使用手机的时候点击打开微视,查看一些自己感兴趣的视频,现在很多视频应用都是采用滑动的方式来进行切换视频,如果用户的手不方便进行滑动 ...
移动端H5页面在微信浏览器内audio无法自动播放问题解决
相信许多小伙伴都遇见过这话种情况,在微信浏览器内添加的audio 无法自动播放之前写过好多那种活动页添加的背景音乐都可以自动播放,直到后来ios 增加了限制就出现了这个问题怎么解决的只需给audi ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
IOS音视频（三）AVFoundation 播放和录音
IOS音视频(三)AVFoundation 播放和录音 1. 音频理论知识 1.1 声音的物理性质 1.2 数字音频 1.2.1 采样.量化和编码 1.2.2 音频编码 1.3 音频编解码 2. 播放 ...
iOS音视频实现边下载边播放
iOS音视频实现边下载边播放近段时间制作视频播放社区的功能,期间查找了不少资料,做过很多尝试,现在来整理一下其中遇到的一些坑.由于考虑到AVPlayer对视频有更高自由度的控制,而且能够使用它自定义 ...
php ppt自动播放,ppt如何循环播放，ppt如何添加视频设置自动播放(ppt转换成视频)...
演示文稿制作软件Microsoft Office PowerPoint,主要用于演示文稿的创建,即幻灯片的制作.可有效帮助演讲.教学,产品演示等,使用范围广泛.大家应该都比较熟悉吧.学习使用PPT,使 ...
解决Chrome浏览器中无法通过代码实现自动播放错误
错误提示为:Uncaught (in promise) DOMException: play() failed because the user didn't interact with the do ...
谷歌浏览器audio标签自动播放音乐问题解决
前面一篇博客中有audio标签自动播放音乐的代码,可是后来再打开页面时音乐自动播放报错了: 看了网上的一些帖子才知道原来在4月份谷歌浏览器做了改革,不止谷歌, 其他浏览器好像也不支持自动播放了,现贴出 ...
Android 基于GSYVideoPlayer实现短视频软件上下滑自动播放视频
先放效果图两个视频的地址: private final String mp4_a = "http://vfx.mtime.cn/Video/2019/03/19/mp4/190319212 ...
html打开ppt自动播放,怎么自动播放ppt_ppt设置自动播放方法-win7之家
我们在制作ppt的时候,一般程序都会自动默认为自动播放的,也有的用户是不喜欢ppt自动播放,但有时会没有设置自动播放,最近有用户想设置ppt自动播放功能,那么要怎么自动播放ppt呢,下面小编给大家分享 ...

最新文章

热门文章