【HTML】播放器如何自动播放【已解决】

自动播放器策略

先了解浏览器的自动播放器策略

  1. 始终允许静音自动播放
  2. 在以下情况,带声音的自动播放才会被允许
    2.1 用户已经与当前域进行交互
    2.2 在桌面上,用户的媒体参与指数阈值(MEI)已被越过,这意味着用户以前播放带有声音的视频。
    2.3 用户已将网站添加到移动设备上的主屏幕或者桌面上安装pwa
  3. 顶部帧可以将自动播放权限委派给其他iframe,以允许自动播放声音

媒体参与度(MEI,Media Engagement Index)
参与度衡量个人在网站上使用多媒体的倾向度
通过该链接查看你的媒体参与度:about://media-engagement
在这里插入图片描述

自动播放代码

1.方法一

<video url="xxxx" id="videoId"/>let video = document.getElementById("videoId");function play(){//视频元素可以选择静音后再播放,提示用户打开声音video.muted=true;//打开静音video.play();//判断当前是否可以用播放声音const ctx = new AudioContext();const canAutoPlay = ctx.state === 'running';//能播放声音返回runningctx.close();if(canAutoPlay){video.muted = false;//取消静音}
}
play();

2.方法二

<!-- Autoplay is allowed. -->
<iframe src="xxxx" allow="autoplay"><!-- Autoplay and Fullscreen are allowed. -->
<iframe src="xxxx" allow="autoplay; fullscreen">

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/178963.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL使用存储过程迁移用户表数据,过滤用户名相同名称不同的用户

存储过程简介 存储过程&#xff08;Stored Procedure&#xff09;是一组为了完成特定功能的SQL语句集&#xff0c;经编译后存储在数据库中&#xff0c;用户通过指定存储过程的名字并给定参数&#xff08;如果该存储过程带有参数&#xff09;来调用执行它。它是一段预编译的SQL…

开源的网站数据分析统计平台——Matomo

Matomo 文章目录 Matomo前言一、环境准备1. 整体安装流程2.安装PHP 7.3.303.nginx配置4.安装matomo4.1 访问安装页面 http://192.168.10.45:8088/index.php4.2 连接数据库4.3 设置管理员账号4.4 生成js跟踪代码4.5 安装完成4.6 警告修改4.7 刷新页面&#xff0c;就可以看到登陆…

Android系统Launcher启动流程学习(一)init启动部分

init进程学习&#xff1a; 文件路径system/core/init/init.cpp 解析init.rc配置文件&#xff0c;首先开启ServiceManager和MediaServer等关键进程init进程fork启动Zygote服务进程处理子进程的终止(signal方式)提供属性服务的功能 int main(int argc, char** argv) {//注释一…

2024上海国际人工智能展(CSITF)“创新驱动发展·科技引领未来”

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;作为当今世界科技发展的关键领域之一&#xff0c;正不断推动着各行各业的创新和变革。作为世界上最大的消费市场之一&#xff0c;中国正在积极努力将AI技术与产业融合并加速推广应用。在这个背景下&…

MYSQL体系结构总结

&#xff08;笔记整理自b站马士兵教育课程&#xff09; MYSQL总体分为服务层和存储引擎层。 一、服务层 功能&#xff1a; 1、连接&#xff1a;管理连接&#xff0c;权限验证。 2、解析器&#xff1a;词法分析&#xff0c;语法分析。 3、优化器&#xff1a;执行计划生成…

vue el-table-column 修改一整列的背景颜色

目录 修改表头以及一整列数据的背景颜色&#xff0c;效果如下&#xff1a; 总结 修改表头以及一整列数据的背景颜色&#xff0c;效果如下&#xff1a; 修改表头背景颜色&#xff1a;在el-table绑定header-cell-style 修改一整列的数据背景颜色&#xff1a;在el-table绑定:cel…

全志XR806实现简单的家用环境监测传感器

XR806是一款支持WiFi和BLE的高集成度无线MCU芯片, 以其集成度高、硬件设计简单、BOM成本低、安全可靠等优点, 成为极客们进行小开发创作的首选. 恰好最近获得了XR806开发板的试用资格,因此决定基于此开发板制作一个简单的家用环境监测传感器. 1.功能介绍 作为一个环境监测传感…

【npm run dev 报错:error:0308010C:digital envelope routines::unsupported】

问题原因&#xff1a; nodejs版本太高&#xff08;nodejs v17版本发布了openSSL3.0对短发和密钥大小增加了更为严格的限制&#xff0c;nodejs v17之前版本没有影响&#xff0c;但之后的版本会出现这个错误&#xff0c;物品的node版本是20.9.0&#xff09; 解决方式&#xff1…

随想录一刷·数组part1

你好&#xff0c;我是安然无虞。 文章目录 1. 二分查找题型2. 移除元素题型 1. 二分查找题型 二分查找传送门 class Solution { public:int search(vector<int>& nums, int target) {// 在有序数组中查找第一时间想到二分查找int left 0, right nums.size() - 1…

ruby语言怎么写个通用爬虫程序?

Ruby语言爬虫是指使用Ruby编写的网络爬虫程序&#xff0c;用于自动化地从互联网上获取数据。其中&#xff0c;CRawler是一个基于文本的小型地牢爬虫&#xff0c;它被设计为可扩展&#xff0c;所有游戏数据均通过JSON文件提供&#xff0c;程序仅处理游戏引擎。除此之外&#xff…

Stream 流对象的创建与各方法

Stream 流对象的创建与各方法 目录 1.0 Stream 流的说明 2.0 Stream 流对象的创建 2.1 对于 Collection 系列集合创建 Stream 流对象的方式 2.2 对于 Map 系列集合创建 Stream 流对象的方式 2.3 对于数组创建 Stream 流对象的方式 3.0 Stream 流的中间方法 3.1 Stream 流的 …

【机器学习】四、计算学习理论

1 基础知识 计算学习理论&#xff08;computational learning theory&#xff09;&#xff1a;关于通过“计算”来进行“学习”的理论&#xff0c;即关于机器学习的理论基础&#xff0c;其目的是分析学习任务的困难本质&#xff0c;为学习算法体统理论保证&#xff0c;并根据结…

【进程控制⑦】:制作简易shell理解shell运行原理

【进程控制⑦】&#xff1a;制作简易shell&&理解shell运行原理 一.交互问题&#xff0c;获取命令行二.字串分割问题&#xff0c;解析命令行三.指令的判断四.普通命令的执行五.shell原理本质 一.交互问题&#xff0c;获取命令行 shell刚启动时就会出现一行命令行&#x…

Jenkins自动化部署简单配置

下载安装jenkins 安装Jenkins步骤 点击Next的时候会有jdk版本跟Jenkins版本不符合的情况 1. 看下任务管理器内Jenkins服务是否启动&#xff0c;在浏览器里面输入localhost:2023&#xff08;端口号是安装时输入的&#xff09; 2. 根据路径找到放置密码的文件&#xff08;C…

第17期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练 Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…

.NET Core 中插件式开发实现

在 .NET Framework 中&#xff0c;通过AppDomain实现动态加载和卸载程序集的效果&#xff1b;但是.NET Core 仅支持单个默认应用域&#xff0c;那么在.NET Core中如何实现【插件式】开发呢&#xff1f; 一、.NET Core 中 AssemblyLoadContext的使用 1、AssemblyLoadContext简…

免费记课时小程序-全优学堂

1. 教师使用小程序记上课 使用步骤 创建了员工账号&#xff0c;员工需设置为教师为班级进行排课使用系统账号绑定小程序&#xff0c;记上课 #1.1 创建员工账号 通过系统菜单’机构设置->员工管理‘&#xff0c;添加本机构教师及其他员工。 添加过程中&#xff0c;可设置…

【计算机网络】同源策略及跨域问题

1. 同源策略 同源策略是一套浏览器安全机制&#xff0c;当一个源的文档和脚本&#xff0c;与另一个源的资源进行通信时&#xff0c;同源策略就会对这个通信做出不同程度的限制。 同源策略对 同源资源 放行&#xff0c;对 异源资源 限制。因此限制造成的开发问题&#xff0c;称…

MyBatis无法读取XML中的Method的乌龙事件

事件背景 同事反馈&#xff0c;相同的jar包&#xff0c;在多人本地的电脑、多台服务器中&#xff0c;都是可以正常启动的&#xff0c;只有在其中一台服务器&#xff0c;简称它为A&#xff0c;无法启动&#xff0c;因为启动后的初始化操作中有一个调用mybatis方法的操作&#x…

oracle如果不适用toad或者plsql工具如何获取索引建表语句

select dbms_lob.substr(dbms_metadata.get_ddl(INDEX,INDEX_NAME,DIXON))||; from dba_indexes where ownerDIXON这个语句可以获取dixon用户的所有索引创建语句&#xff0c;sql脚本形式呈现 点开一个语句查看 如果不使用dbms_lob.substr这个函数最后得到是一个clob selec…