Firefox 66 将阻止自动播放音频和视频

PingWest品玩2月5日报道,从发布适用于桌面的 Firefox 66 和 Firefox for Android 开始,Firefox 将默认阻止音频和视频的自动播放。

除非网页通过 HTMLMediaElement API 与用户进行交互以播放音频,例如用户点击「播放」按钮。当然,Firefox 也支持静音自动播放,只需将 HTMLMediaElement 的“muted”属性设置为 true,即可启用自动播放功能

问题场景:
  chrome中打开时,video标签都不能自动播放, 添加 autoplay属性不起作用

一、方案一

在video标签中添加muted属性,亲测有效

<video muted src="xxx"  autoplay  loop></video>
     原理就是大多数浏览器在都支持静音的视频播放,如果你的视频需要有声音,或者要用音频,这个还是不能解决问题,而且不是太稳定。。。
二、方案二
    修改浏览器默认配置,只适合本地展示,或大屏展示用
    在浏览器地址栏 输入   chrome://flags/#autoplay-policy

 找到“Autoplay policy”, 修改后面状态为“NO user gesture is required“,重启浏览器就好了

Chrome,firefox解除阻止视频自动播放的更多相关文章

  1. iOS 微信 音频 视频自动播放

    iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165

  2. 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案(IOS、安卓、微信端)

    最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...

  3. javascript采用Broadway实现安卓视频自动播放的方法(这种坑比较多 不建议使用)

    javascript采用Broadway实现安卓视频自动播放的方法Broadway 是一个 H.264 解码器, 比jsmpge清晰度要高 使用 Emscripten 工具从 Android 的 H. ...

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

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

  5. 新版微信h5视频自动播放

    微信最近升级了新版本,直播视频不能自动播放,经过了一番探索,发现下列方法可以实现自动播放. if (typeof WeixinJSBridge == "undefined") { ...

  6. Android 中WebView中video视频自动播放

    转载于https://juejin.im/post/5d5ac7eb51882562744fae37 如果有使用过Android的WebView 播放视频的伙伴们一定会发现, 在点开视频网页的时候并没 ...

  7. 手机端 video 视频自动播放方法

    //创建一个video标签 var __video = $("#video").appendTo('.i-i-video'); //设置视频文件地址 __video.attr('s ...

  8. h5中嵌入视频自动播放的问题

    在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...

  9. iframe插入视频自动播放代码

    <iframe marginwidth=0 marginheight=0 src='http://www.wsview.com/yzplayerAction!play2.action?autoP ...

随机推荐

  1. 选择company回显appname

    function showSupCompany() { var obj = {}; obj.label = ScompanyId.getSelectedLabel(); obj.value = Sco ...

  2. rocketMQ 消息的 tag

    tag 的使用场景:不同的消费组,订阅同一 topic 不同的 tag,拉取不同的消息并消费.在 topic 内部对消息进行隔离. producer 发送消息,指定 tag Message msg = ...

  3. redis-主从复制、读写分离

    1.为什么要主从复制(一主多仆),读写分离:redis在作为缓存的时候,随着数据的不断增加,是有可能出现宕机的,这时候就出现了“单点故障”,解决方案就是进行主从复制,读写分离. 原理图:Master是 ...

  4. 阶段3 2.Spring_10.Spring中事务控制_2 作业-基于注解的AOP实现事务控制及问题分析_上

    创建maven的新项目 先复制坐标的依赖. 再把代码复制进来 先改造ioc的部分 复制上面一行代码.到下面 改成context 这里也是复制的上面两行代码.到下面改成context关键字 配置扫描的包 ...

  5. 学习SASS

    这几天白老师叫我们css的扩展技术,有什么LESS,还有SASS(我还以为是SAS...QAQ),LESS由于功能比较简单,用的也比较少所以我们重点学习了SASS.简单地说SASS是一种CSS的开发工 ...

  6. 彻底搞懂snowflake算法及百度美团的最佳实践

    写在前面的话 一提到分布式ID自动生成方案,大家肯定都非常熟悉,并且立即能说出自家拿手的几种方案,确实,ID作为系统数据的重要标识,重要性不言而喻,而各种方案也是历经多代优化,请允许我用这个视角对分布 ...

  7. Linux进程:管理和调度

    一:进程管理 进程.轻量级进程和线程 通常定义:进程是程序执行时的一个实例. 这个很像类和实例对象的关系.从内核来看:进程的目的就是担当分配系统资源(CPU,内存等)的实体. 当进程创建时,它几乎和父 ...

  8. linux环境下安装yaf

    一.ubuntu环境 1.首先到http://pecl.php.net/get/yaf下载最新版本的yaf,我的是yaf-2.2.9.tgz. 2.解压 tar -zxvf yaf-2.2.9.tgz ...

  9. 完全分布式部署Hadoop

    完全分布式部署 Hadoop 分析: 1)准备 3 台客户机(关闭防火墙.静态 ip.主机名称) 2)安装 jdk 3)配置环境变量 4)安装 hadoop 5)配置环境变量 6)安装 ssh 7)配 ...

  10. Vue-cli 鼠标监听事件之滚动条

    <template>   <div class="scroll">     <div class="scroll-div-outer&quo ...