转载http://www.nooong.com/docs/chrome_video_autoplay.htm

在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许自动播放音频和视频。

如果你用javascript 代码显示地调用 play 方法:

vdo.play();

如果你写的自动播放,你将会在控制台看到如下异常:Uncaught(in promise) DOMException

原因

这是因为,Chrome只允许用户对网页进行主动触发后可自动播放音频和视频。其实,严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频,而视频其实是不受限制的。但因为视频文件同样包含了音频,所以也一同被禁止了。Chrome这样做的目的是为了防止开发者滥用自动播放功能而对用户产生骚扰。

解决方法

比较常规的做法是,为video标签设置muted属性,使它静音,这样视频就能自动播放了,但是没有声音。然后待用户在网页上有了任意触发后,再将muted去掉。或者让用户手动去打开音频

<video autoplay muted></video>
document.body.addEventListener('mousedown', function(){
vdo.muted = false;
}, false);

 (others)另一个解决方法

在chrome的地址栏中输入:chrome://flags/#autoplay-policy,回车打开设置页面,在该设置改页面会看到黄色方框标记的字体:Autoplay policy ,该选项默认设置为Default,改为:No user gesture is required ,修改选项后页面下方会弹出个提示框,点击提示框上的“RELAUNCH NOW”即可。控制台不会报这个错误了Uncaught(in promise) DOMException

转载:https://blog.csdn.net/Mariosss/article/details/87861167

PS:上面的代码只是随手写的,你可根据自己的逻辑加以优化,只要清楚这个原理就可以了。转载的文章有两种方法,我的需求必须是页面打开就要有声音,所以用到另一个方法(others)解决了,有兴趣的可以去看看转载的方法。

解决Chrome浏览器无法自动播放音频视频的问题,Uncaught(in promise) DOMException相关推荐

  1. 解决Chrome浏览器无法自动播放音频视频的问题

    谷歌浏览器做了改革,不再允许自动播放音频和视频.Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频. <video autoplay></video> 所以好多需 ...

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

    比较常规的做法是,为video标签设置muted属性,使它静音,这样视频就能自动播放了,但是没有声音.然后待用户在网页上有了任意触发后,再将muted去掉.或者让用户手动去打开音频(腾讯视频就是这样做 ...

  3. js解决chrome浏览器无法自动播放音频

    先随便设置下audio路径 <audio src="xxx.mp3" id="video" ref="video"></a ...

  4. 解决google浏览器无法自动播放音视频问题

    浏览器报错:Unmuting failed and the element was paused instead because the user didn't interact with the d ...

  5. 解决chrome浏览器无法自动调用阿里旺旺客户端聊天软件

    2019独角兽企业重金招聘Python工程师标准>>> 解决chrome浏览器无法自动调用阿里旺旺客户端聊天软件 复制粘贴以下代码,可以直达设置页面 chrome://setting ...

  6. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 一般的浏览器input和button的高度不一致问题...

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  7. 谷歌chrome浏览器无法自动播放video标签视频的问题

    问题根源详见:Chrome中的自动播放政策>>  https://developer.chrome.com/blog/autoplay/ The Autoplay Policy launc ...

  8. <audio>播放音频Chrome浏览器禁止自动播放问题 play() failed because the user didn‘t interact with the document first

    2018年一月份开始  Chrome浏览器不会再自动播放音频文件 用户必须对网页进行主动触发后才可自动播放 <audio id="audio" autoplay=" ...

  9. 解决 CHROME FLASH 不能自动播放的问题及加载视频前的“黑色背景”如何改变

    chrome中flash不能自动播放,相信很多人都遇到了这个问题,网上检索的话,很多都会提到添加muted,当时尝试了这个方法,根本不起作用.后来慢慢发现一种情况:当单独在根节点中放入video后,可 ...

最新文章

  1. 【转】Eclipse的Debug调试技巧大全
  2. 不同版本的Chrom浏览器对应的ChromDriver的版本
  3. Emacs常用快捷键
  4. html点击按钮弹出悬浮窗_网课助手1.0 支持悬浮窗搜题等多功能
  5. 上传声音 微信小程序_SpringBoot开发案例之微信小程序录音上传
  6. 利用Telerik Fiddler 进行手机抓包!
  7. 简单介绍java Enumeration(转)
  8. 设计模式——解释器模式
  9. activiti 功能概述_子串功能概述
  10. @sql 单元测试_SQL单元测试:使用异常
  11. pm2.5测试软件,测pm2.5的软件准吗
  12. python 分布式存储_Amazon S3 分布式存储的 python 接口实现
  13. Dom4j完整教程,操作XML教程
  14. 存储ic载板_【行业亮点】看好载板供不应求趋势,深南/兴森/越亚积极布局
  15. hog特征提取python代码_80行Python实现-HOG梯度特征提取(转载)
  16. 落地SOA成为中国电信战略转型第一步
  17. java学习之高级语法(二十八)----- 网络编程
  18. 久邦GOMO总裁朱志在2018校招生交流会分享
  19. 【公益译文】网络威胁信息共享指南
  20. 算法图解——广度优先搜索

热门文章

  1. loadrunner录制打不开网址 loadrunner录制ie时已停止工作
  2. 一个结婚四年的男人的真实感受
  3. 宿州学院对口招生计算机试卷题目,宿州学院2017年对口招生学前教育专业技能测试内容及评分标准...
  4. 『金融帝国实验室』(Capitalism Lab)〔优秀教程②〕《了解供应链中供求关系》(作者:CapitalismLabStory)
  5. html怎么让两个div重叠,两个DIV或多个DIV顺序重叠加
  6. 杂谈POWERPOINT2010中的各项操作(三)
  7. “熊猫视图”.Net图形控件功能介绍 [十六]:图元旋转
  8. pycharm分屏设置
  9. Skywalking分布式链路跟踪(一)原理、docker搭建oap-ES7.x存储、配置java测试项目
  10. iframe+vue修改滚动条样式