React-player 如何使用自动播放处理播放暂停状态答案

【问题标题】：React-player How to handle Play Pause state with autoplayReact-player 如何使用自动播放处理播放暂停状态
【发布时间】：2021-11-24 05:52:27
【问题描述】：

我的自动播放策略有问题，它完全弄乱了我的自定义布局。

在组件中，“播放”状态默认设置为 true 以触发自动播放，但刷新页面后，即使“播放”状态设置为 true，自动播放也不起作用。现在的问题是当用户单击播放按钮时，状态不会改变，因为它已经是 true，解决方案是将其设置为 false，然后再次设置为 true，但在此解决方案中，用户必须在图标上单击两次。

有人可以帮我解决这个问题吗，也许 react-player 已经有状态或方法来触发播放，我不需要“播放”状态来处理播放暂停。

这是一个简单的例子，它是如何工作的

export default function Untitled() {
    const playerRef = useRef(null);
    const [playing, setPlaying] = useState(true)
    return (
    <div>
        <ReactPlayer
            style={{display:"none"}}
            controls={false}
            playing={playing}
            wrapper={"audio"}
            progressInterval={200}
            config={{
              file: {
                attributes: {preload: "auto"},
                forceAudio:true,
              },
            }}
        />
        <IconButton size="small">
            {playerRef && playerRef.current.player.isPlaying ? (
              <PauseIcon onClick={() => setPlaying(false)}/>
            ) : (
              <PlayArrowIcon onClick={() => setPlaying(true)}/>
            )}
        </IconButton>
    </div>
    )
}

【问题讨论】：

添加您的示例代码。我们需要知道你在代码中做什么

标签： javascript reactjs react-player

【解决方案1】：

这是因为您没有将“ref”传递/分配给“ReactPlayer”组件。

在这种情况下，不需要 ref。

export default function Untitled() {
    const [playing, setPlaying] = useState(true)
    return (
    <div>
        <ReactPlayer
            style={{display:"none"}}
            controls={false}
            playing={playing}
            wrapper={"audio"}
            progressInterval={200}
            config={{
              file: {
                attributes: {preload: "auto"},
                forceAudio:true,
              },
            }}
        />
        <IconButton size="small">
            {playing? (
              <PauseIcon onClick={() => setPlaying(false)}/>
            ) : (
              <PlayArrowIcon onClick={() => setPlaying(true)}/>
            )}
        </IconButton>
    </div>
    )
}

【讨论】：

很遗憾，因为如果我们使用“正在播放”状态来控制图标并且自动播放策略阻止视频用户获得暂停图标而不是播放。
看起来像这样ibb.co/mhD18Yx，但视频没有播放
好的，那么请将ref正确分配给组件，您还没有将ref添加到组件。 github.com/CookPete/react-player/blob/HEAD/src/demo/App.js 检查这个用 ref 反应播放器的例子。注意：这是一个类组件示例
如果您仍然遇到问题，请在 React player GitHub 中提出问题。 github.com/CookPete/react-player/issues.

【解决方案2】：

解决方案

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

【讨论】：