谷歌浏览器自动播放(深入分析)

2023-12-08 21:10

本文主要是介绍谷歌浏览器自动播放(深入分析),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

大概是20年的时候,公司做直播项目,主要是APP端的,但是有一个H5的直播间分享功能,棒来这是前端的工作的,但是前端没空,正好我也会前端,于是就有了这篇文章,场景是这样的,用户或者主播可以在直播间内把直播间分享到微信用H5链接打开后可以直接观看直播间内容,测试了很多内核的浏览器,发现谷歌浏览器有个安全策略,禁止自动播放,当时的做法是在界面的顶层做一个模板的播放按钮,让用户点击后才能自动播放,后面研究了一下,详情如下!

分析

在这里插入图片描述
这里已经设置了autoplay为true了,但是还是在谷歌浏览器上还是不能自动,同时弹出警告
在这里插入图片描述

但是我们发现有些网站是可以自动播放的,如抖音的网页版https://www.douyin.com/
为什么我们自己写的就不可以呢!我们看看谷歌浏览器的官网
在这里插入图片描述
媒体参与度实际上就是谷歌浏览器会根据用户行为判断这个网站的自动播放是否可用,也就是如果用户每次打开这个网站,都要手动点击播放按钮,那么谷歌浏览器就会标识这个网站可以开启自动播放!

可以通过这个工具查看网站的用户参与度
在这里插入图片描述

关闭掉所有的谷歌浏览器,然后命令行输入
在这里插入图片描述

open -a "Google Chrome" --args --user-data-dir=./

这个命令就是想打开一个新安装的谷歌浏览器一样!

在这里插入图片描述
那么抖音的自动播放也被关闭了!

实际上谷歌浏览器自动播放有3种情况!

  • 设置了禁音
  • 较高的媒体参与度
  • 使用iframes嵌入,这个是有一个大前提,就是满足前两个中的一个,顶级界面已经获取到autoplay权限,并且将autoplay的权限下放到iframes中
    在这里插入图片描述

这篇关于谷歌浏览器自动播放(深入分析)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/471338

相关文章

zeroclipboard 粘贴板的应用示例, 兼容 Chrome、IE等多浏览器

zeroclipboard单个复制按钮和多个复制按钮的实现方法 最近网站改版想让复制代码功能在多个浏览器上都可以实现,最近看网上不少说我们的代码复制功能不好用的,我们最近将会增加代码高亮等功能,希望大家多多支持我们 zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的

微软正式推出 Spartan 斯巴达浏览器

作为用于替代 IE 浏览器的下一代继任者,微软的 Project Spartan 斯巴达浏览器可算是吊足了玩家们的胃口!如今,在最新的 Windows 10 Build 10049 版本起,它终于正式登场了。 斯巴达浏览器搭载了全新的渲染引擎、新的用户界面并集成了 Cortana 语音助手。功能上新增了稍后阅读列表、阅读视图、F12开发者工具、支持网页注释 (手写涂鸦),可以保存到 O

PC与android平板通过浏览器监控Verybot的视频

下面这个视频是PC与android平板通过浏览器监控Verybot的视频:           http://v.youku.com/v_show/id_XNjYzNzYyMTIw.html

全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

一、前言说明 随着风云局势的剧烈变化,对我们搞软件开发的人员来说,影响也是越发明显,比如之前对美对欧的软件居多,现在慢慢的变成了对大鹅和中东以及非洲的居多,这两年明显问有没有俄语或者阿拉伯语的输入法的增多,这要是放在2019年以前,一年也遇不到一个人问这种需求场景的。 地图应用这块也是,之前的应用主要在国内,现在慢慢的多了一些外国的应用场景,这就遇到一个大问题,我们平时主要开发用的都是国内的地

搜狗浏览器打开CSDN博客排版错乱问题解决

之前发生过几次,不知道什么原因。 今天一直用着好好的,打开一个csdn连接,显示404,博文被删除了,于是就用百度快照打开试试,百度快照打开显示的排版很乱也没找到有用信息。 后面再浏览CSDN博客就排版错乱,显示一个大大二维码图片。 尝试删除IE缓存无效,使用谷歌浏览是好的。 基本锁定就是搜狗缓存导致的,于是找如何删除搜狗缓存   清除后恢复正常

240907-Gradio插入Mermaid流程图并自适应浏览器高度

A. 最终效果 B. 示例代码 import gradio as grmermaid_code = """<iframe srcdoc='<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>My static Spa

Jasperreports+jaspersoft studio 实现单个或多个jrxml(jasper)文件生成一个pdf文件,并利用Servlet发送该pdf文件到浏览器中展示

Jasperreports+jaspersoft studio 实现单个或多个jrxml(jasper)文件生成一个pdf文件,并利用Servlet发送该pdf文件到浏览器中展示; 代码如下: Demo07.jrxml <?xml version="1.0" encoding="UTF-8"?><!-- Created with Jaspersoft Studio version 6.6.

vite是如何实现依赖预构建的,浏览器为什么没有实现从node_modules查找依赖,vite开发环境解决了什么问题

浏览器的esmodule 为什么没有做从node_modules查找依赖项 浏览器是基于http请求的,node_modules中依赖项不可控,可能又会依赖很多的包,整个依赖图都需要加载的话很耗性能。 commonjs是运行在服务端的,以file形式读取文件,内部有规避机制。 依赖预构建 首先vite会找到对应的依赖,然后调用esbuild(对js语法进行处理的一个库),将其他规范的代码转换

浏览器工作原理(3)-TCP协议文件如何从服务器到浏览器

浏览器工作原理-TCP协议,文件如何从服务器到浏览器 本周继续学习浏览器工作原理及实践,本次内容来看一下TCP协议确保文件完整的送到至浏览器 First Page 是指页面加载到首次开始绘制的时长,而影响这个性能指标的一个重要原因是网络加载速度,网络传输协议无论使用http还是websocket,都是基于TCP/IP的,所以有必要了解一下TCP/IP,对于web的性能调优和问题定位都有很

浏览器工作原理(2)-进程的理解

Chrome架构:仅仅打开了1个页面,为什么有4个进程? 1 并行处理:同一时刻处理多个任务,比如计算如下公式并显示出来 A = 1+2B = 20/5C = 7*8 这个过程分成四个任务:三个计算,一个显示。正常情况下使用单线程来处理,分为四步依次执行。如果采用多线程,前三个计算任务同时执行,最后再显示,单线程需要四步,而多线程只需要两步,使用并行处理大大提升性能 2 线程 VS