react-player静音不能自动播放问题

现象

移动端不能自动播放

原因

取决于您使用的浏览器,但muted如果您不想与autoplay用户交互,则必须使用视频。

Chrome 的自动播放策略很简单:

  • 始终允许静音自动播放
  • 在以下情况下允许自动播放声音:
    • 用户与域进行了交互(单击、点击等)。
    • 在桌面上,用户的媒体参与指数阈值已被超过,这意味着用户之前播放过有声视频。
    • 用户已将网站添加到移动设备的主屏幕或在桌面设备上安装 PWA。
  • 顶级框架可以将自动播放权限委托给其 iframe 以允许自动播放声音。

加了静音依旧不行

reactjs 使用react-player npm无法在IOS上自动播放视频

<ReactPlayer playing=true url="video_url" muted loop=true />

我认为您需要playsInline属性来实现iOS在非全屏模式下的自动播放

New <video> Policies for iOS | WebKit

官方说明的

A note about the playsinline attribute: this attribute has recently been added to the HTML specification, and WebKit has adopted this new attribute by unprefixing its legacy webkit-playsinline attribute. This legacy attribute has been supported since iPhoneOS 4.0, and accordance with our updated unprefixing policy, we’re pleased to have been able to unprefix webkit-playsinline. Unfortunately, this change did not make the cut-off for iOS 10 Developer Seed 2. If you would like to experiment with this new policy with iOS Developer Seed 2, the prefixed attribute will work, but we would encourage you to transition to the unprefixed attribute when support for it is available in a future seed.

加 playsinline 属性 和 muted属性

<ReactPlayer playing playsinline muted controls={false} url={earth} loop width="100%"height="100%"/>

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

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

相关文章

RunnerGo条件控制器使用方法

在做性能测试时我们需要根据业务需求、业务场景来配置测试脚本&#xff0c;举个例子&#xff1a;在登录注册场景中&#xff0c;可能会有账号密码全部正确、账号格式错误、密码错误等多种情况&#xff0c;这里的“登录/注册”事件可以视为一个场景。一个真实业务中的场景&#x…

2023 年牛客多校第五场题解

A Jujubesister 题意&#xff1a;给定长度为 n n n 的数列 { a } i 1 n \{a\}_{i1}^n {a}i1n​&#xff0c; q q q 次询问区间 [ l , r ] [l,r] [l,r] 上满足 a i a k > a j a_ia_k>a_j ai​ak​>aj​ 且满足 l ≤ i < j < k ≤ r l \le i <j<k \…

课程作业-基于Python实现的迷宫搜索游戏附源码

简单介绍一下 该项目不过是一个平平无奇的小作业&#xff0c;基于python3.8开发&#xff0c;目前提供两种迷宫生成算法与三种迷宫求解算法&#xff0c;希望对大家的学习有所帮助。 项目如果有后续的跟进将会声明&#xff0c;目前就这样吧~ 效果图如下所示&#xff1a; 环境…

14 springboot项目——首页跳转实现

templates里的静态资源无法访问&#xff0c;需要写mvc的配置类或者改application.xml配置文件实现首页访问。这两个方式用其中一种即可&#xff0c;否则会冲突。 14.1 首页跳转方式一 创建配置类&#xff0c;在config包中创建一个mvc的配置类&#xff1a; package jiang.com.s…

设备管理系统与物联网的融合:实现智能化设备监控和维护

在数字化时代&#xff0c;设备管理系统和物联网技术的融合为工业企业带来了巨大的变革和创新。本文将探讨设备管理系统与物联网的融合&#xff0c;重点介绍设备健康管理平台在实现智能化设备监控和维护方面的关键作用和优势。 一、设备管理系统与物联网的融合 随着物联网技术的…

windows脚本获取管理员权限修改host

很多时候我们常常需要通过管理员权限执行脚本&#xff0c;脚本可能涉及到一些受保护信息的访问&#xff0c;我们写个简单的脚本来更改host文件&#xff0c;host文件就是需要管理员权限才能访问的启动脚本时先检查是否有管理员权限&#xff0c;如果没有就调用授权脚本进行管理员…

BPMNJS插件使用及汉化(Activiti绘制流程图插件)

BPMNJS插件运行最重要的就是需要安装nodejs插件,这不一定要安装和测试好。 主要是使用npm命令 1、配置BPMNJS插件绘制activiti7工作流 1.1、安装和配置nodejs 插件 1.1.1、下载nodejs 下载地址:https://nodejs.org/en 1.1.2、安装nodejs,傻瓜式安装 安装之后在安装…

TypeScript知识点总结

typescript是js的超集&#xff0c;目前很多前端框架都开始使用它来作为项目的维护管理的工具&#xff0c;还在不断地更新&#xff0c;添加新功能中&#xff0c;我们学习它&#xff0c;才能更好的在的项目中运用它&#xff0c;发挥它的最大功效 let b: null nulllet c: null …

Mac提示文件:已损坏,无法打开。你应该把它移到废纸篓

文章目录 一、电脑信息二、打开任何来源设置三、更改应用程序拓展属性 一、电脑信息 我的是新版的Venture 13的系统。UI改的比较多。与之前的配置还是有很大的区别的。 打开下载的软件&#xff0c;显示已经损坏&#xff0c;打不开。抛开软件本身的问题外&#xff0c;一般是Ma…

vue3过滤输入框首尾空格

vue3过滤输入框首尾空格 在 directive文件夹下 新建 trim.ts 文件 // trim.ts 文件 import { App } from "vue"function getInput(el: { tagName: string; querySelector: (arg0: string) > any }) {let inputEleif (el.tagName ! INPUT) {inputEle el.queryS…

微信云开发-数据库操作

文章目录 前提初始化数据库插入数据查询数据获取一条数据获取多条数据查询指令 更新数据更新指令 删除数据总结 前提 首先有1个集合(名称:todos). 其中集合中的数据为: {// 计划描述"description": "learn mini-program cloud service",// 截止日期"…

LeetCode 626. 换座位

题目链接&#xff1a;LeetCode 626. 换座位 题目描述 表名&#xff1a;Seat 编写SQL查询来交换每两个连续的学生的座位号。如果学生的数量是奇数&#xff0c;则最后一个学生的id不交换。 按 id 升序 返回结果表。 查询结果格式如下所示。 示例1&#xff1a; 题目分析 如…

医疗知识图谱问答 ——Neo4j 基本操作

前言 说到问答机器人&#xff0c;就不得不说一下 ChatGPT 啦。一个预训练的大预言模型&#xff0c;只要是人类范畴内的知识&#xff0c;似乎他回答得都井井有条&#xff0c;从写文章到写代码&#xff0c;再到解决零散琐碎的问题&#xff0c;不光震撼到我们普通人&#xff0c;就…

微信消息撤回时间延长到2小时了?

““微信发出2小时后也可撤回,上班族的福音. ” 近日&#xff0c;有传言称 微信撤回消息的时间将延长至2小时 引起舆论关注 微信作为国内最大的网络社交平台&#xff0c;目前用户已超过11亿。 虽然微信已经做的很不错了&#xff0c;但微信消息撤回这一功能&#xff0c;还是…

【第一阶段】kotlin语言的String模板

1.在Java中拼接字符串使用的是“” 2.在kotlin中使用"${}" 3.kotlin语言中if是表达式&#xff0c;更灵活 fun main() {val city"西安"val time24//java中写法println("我在"city"玩了"time"小时")//kotlin中写法&#xff0…

jenkins通过sshPut传输文件的时候,报错Permission denied的SftpException

一、背景 使用jenkins的ssh插件传输文件至远程机器的指定目录&#xff0c;php程序打包后&#xff0c;经过zip压缩为oms.zip zip -rq oms.zip ./ -x .git/* -x .env然后我们求md5值 md5sum oms.zip最后执行传输。 09:03:02 Executing command on ssh[116.61.10.149]: mkdir…

使用docker安装wordpress详细教程及出现数据库无法连接问题解决方法

1.获取wordpress镜像 docker pull wordpress 2.创建wordpress 的容器 a.创建wordpress的文件镜像卷文件夹 mkdir wordpress b.创建wordpress镜像 docker run --name wp -p8080:80 -v /home/wordpress/:/var/www/html -d wordpress c.查看容器运行情况 3.在本地或者其他服务器创…

Astro + Vercel 快速搭建自己的博客网站

Astro 和 Vercel 彼此相得益彰&#xff0c;前者提供出色的开发者体验&#xff0c;用于构建现代静态站点&#xff0c;而后者负责部署和托管代码。 两者结合我们就可以轻轻松松零成本搭建自己的博客网站。查看示例。 步骤 1&#xff0c;创建评论仓库 在部署博客之前&#xff…

深入学习了解 gRPC协议

gRPC 是一个高性能、通用的开源RPC框架&#xff0c;其由 Google 主要面向移动应用开发并基于HTTP/2 协议标准而设计&#xff0c;基于 ProtoBuf(Protocol Buffers) 序列化协议开发&#xff0c;且支持众多开发语言。本文作者深入研究了 gRPC 协议&#xff0c;对协议本身作出解构。…

Linux 命令速查表

Linux 命令速查表 命令速查表系统硬件用户登陆文件进程安装包文件权限安装源(编译)搜索网络文件传输磁盘使用情况目录遍历学习网址命令速查表 系统 uname显示linux系统信息 uname -r显示内核版本信息 uptime显示系统运行的时间 (包括平均负载) hostname显示系统主机名 ho…