这个问题是谷歌基于用户体验方面的考虑, 对页面加载时自动播放的音频作了限制, 试想一下, 如果你打开某个页面就立刻自动播放某种不可描述的声音, 那体验想必是十分酸爽.

尽管这个设定是针对音频的, 但实际上还影响了视频的自动播放, 因为视频也是有声音的!!!!

因此, 解决这个报错的方法很简单: 将给video标签加上一个muted属性即可, 这样就相当于告诉谷歌浏览器, 这个视频是安全的, 可以默默播放.

<body>

  <video src="..." autoplay muted></video>

</body>

声音可以在后续加上, 比如用户点击了页面, 这时就可以把muted设为false.

怎样解决Chrome浏览器因为禁止音频自动播放所造成的视频无法自动播放且报错: Uncaught (in promise) DOMException的问题的更多相关文章

  1. 网页视频不能自动播放？HTML5 video报错Uncaught (in promise) DOMException解决方法

    话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...

  2. vue报错 Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法

    在进行跳转的时候报错 app.js:87499 Uncaught (in promise) NavigationDuplicated?{_name: "NavigationDuplicate ...

  3. 解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException

    转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...

  4. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

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

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

  6. 解决chrome浏览器在win8下没有注册类的问题

    解决chrome浏览器在win8下没有注册类的问题 新建一个txt,里面存放代码 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SO ...

  7. 最简单的解决Chrome浏览器主页被hao123、360和2345篡改的方法是什么

    最简单的解决Chrome浏览器主页被hao123.360和2345篡改的方法是什么 一.总结 一句话总结:打开chrome的安装目录,将chrome.exe改成chrome1.exe即可,然后发送一个 ...

  8. 解决chrome浏览器无法得到window.showModalDialog返回值的问题

    父页面处理: function ProductList() {   var TypeID = window.document.getElementById("Type").valu ...

  9. 解决Chrome浏览器自动记录用户名和密码的黄色背景问题和该解决方法与tab切换至下一个input冲突的问题。

    哈哈哈,是不是标题很长呀,不逗你们了.其实这么长的标题主要就说了两件事: 第一件:解决Chrome浏览器自动记录用户名和密码的黄色背景问题. 第二件:输入完用户名后按下tab键切换至下一个输入密码in ...

随机推荐

  1. Java 面向对象（十三）

    异常 什么是异常 异常 :指的是程序在执行过程中,出现的非正常的情况,最终会导致JVM的非正常停止. 在Java等面向对象的编程语言中,异常本身是一个类,产生异常就是创建异常对象并抛出了一个异常对象. ...

  2. Alpha冲刺（2/4）

    队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11885037.html 作业博客 :https://edu.cnblogs.com/campus/f ...

  3. Laravel 加载第三方类库的方法

    有很多第三方的类库并没有制作 Composer,而是还以 require 的方式进行加载.对于此类的类库 在 Laravel 框架中建立存放第三方的 SDK 目录 app/Libs/* 修改 comp ...

  4. http-proxy-middleware及express实现反向代理

    $ npm install --save-dev http-proxy-middleware npm install express // 引用依赖 var express = require('ex ...

  5. myadmin不需要路劲提权之法

    //觉得很典型的案例,就转载过来了.很多时候phpmyadmin都需要路劲才能写shell.否则拿到了myadmin也是无奈. 查看mysql版本 select version(); 版本是5.1 大 ...

  6. Greenwich.SR2版本的Spring Cloud Feign实例

    前面我们了解了Spring Cloud Ribbon和Hystrix,在使用上它们基本上会成队出现,那么是不是可以把它们组合起来使用?而且我们发现,在服务消费方a-beautiful-client里通 ...

  7. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_12-用户退出-服务端

    实现退出 用户退出要以下动作: 1.删除redis中的token 2.删除cookie中的token controller内定义 spring securety config内放行 对这个url放行 ...

  8. sha256C代码例子

    a.c #include <stdio.h>#include <string.h>#include <openssl/sha.h> 1 int main(int a ...

  9. delphi中TTreeView的使用方法

    [学习万一老师博客摘要] TTreeView 与两个重要的类相关:TTreeNodes.TTreeNode . TTreeNodes即是TTreeView 的Items属性,TTreeNodes是TT ...

  10. Mac下用apache搭建一个局域网服务器

    一:由于MacOX系统下自带Apache环境,所以我们在Mac系统下用Apache配置. Mac系统:10.14.4 二:启动Apache 启动 在终端输入:sudo apachectl start验 ...