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