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

肥肥呀呀呀

已于 2023-08-19 11:23:34 修改

阅读量1.6k

点赞数

分类专栏： react 文章标签： react.js 前端前端框架

于 2023-08-03 16:12:20 首次发布

本文链接：https://blog.csdn.net/weixin_43575775/article/details/132085951

版权

react 专栏收录该内容

7 篇文章

订阅专栏

文章讲述了移动端视频自动播放受浏览器策略影响，尤其是Chrome允许静音自动播放的前提。ReactPlayer在iOS上使用playsinline属性解决非全屏模式下自动播放的问题，以及相关的新HTML标准和WebKit政策变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象

移动端不能自动播放

原因

取决于您使用的浏览器，但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%"/>