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属性

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

这篇好文章是转载于：学新通技术网