React-player How to handle Play Pause state with autoplay

Question

I have a problem with the autoplay policy it completely messes my custom layout.

In the component, there is a "play" state by default set as true to trigger autoplay but after refreshing a page autoplay doesn't work even if the "play" state is set as true. Now the problem is when the user clicks on the play button, state doesn't change because it is already true, the solution is to set it false and again to true but in this solution, user has to click twice on the icon.

Can someone help me with that, maybe the react-player has already state or method to fire the play and I don't need a "play" state to handle play pause.

Here is a simple example how it works

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>
    )
}

add your sample code. we need to know what you are doing in code — sojin, Oct 03 '21 at 13:25

score 0 · Answer 1 · answered Oct 03 '21 at 14:15

0

It is because you are not passing/assigning "ref" to the "ReactPlayer" component.

In this case, the ref is not necessary.

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>
    )
}

answered Oct 03 '21 at 14:15

sojin

2,158
1
10
18

Sadly it is, because if we use "playing" state to control icons and the autoplay policy block video user get a pause icon instead of play. – GooMee Oct 03 '21 at 15:08
It looks like this https://ibb.co/mhD18Yx but video is not playing – GooMee Oct 03 '21 at 15:12
Ok, then please assign the ref to the component properly, you haven't added ref to the component. https://github.com/CookPete/react-player/blob/HEAD/src/demo/App.js check this example of react player with ref. Note: This is a class component example – sojin Oct 03 '21 at 15:12
If you still facing the issue please raise an issue in React player GitHub. https://github.com/CookPete/react-player/issues. – sojin Oct 03 '21 at 15:15

score 0 · Answer 2 · answered Oct 03 '21 at 21:20

Solution

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.
  });
}

React-player How to handle Play Pause state with autoplay

2 Answers2