Videos not autoplaying on mobile

Question

I'm using reactjs and for some reason, videos are not autoplaying on mobile. I'm using iOS 17, Safari Here is my code:

<div className="video" ref={videoRef} dangerouslySetInnerHTML={{
                    __html: `
                <video 
                loop 
                muted 
                autoplay 
                playsinline 
                muted 
                defaultMuted 
                loop
                >
                 <source src=${video} type="video/mp4" />
                  </video>
        `}}>

On mobile, there is just a play button.

I also tried to play the video using javascript:

const videoRef = useRef(null)
    useEffect(() => {
        if (videoRef.current) {
            const videoElement = videoRef.current.children[0];
            videoElement.play();
        }
    })

However, I get the error: `The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission =.```

Edit: How I solved this issue:

Reason for the error: When on Low Power mode, Auto-play videos is off on Safari By Default

How I fixed it: If the video was not displaying, Simply we can add a postor attribute to video, which'll bring a play button for it to start playing, However, I used a img tag if video wasn't autoplaying as there is a play button then. Here is my code:

    const [videoPlayed, setVideoPlayed] = useState(false)
    useEffect(() => {
        if (videoRef.current) {
            const videoElement = videoRef.current.children[0];
            videoElement.play().then(() => {
                setVideoPlayed(true)
            }).catch(err => {            })


                document.addEventListener("click", () => {
                        videoElement.play().then(() => setVideoPlayed(true)).catch(() => {})
                    document.removeEventListener("click", () => {})
                })
        }

return (
        <>
                {/* If video isn't played */}
                <div className="image">
                    {!videoPlayed && <img src={thumbnail} alt="Alt" />}
                </div>
                <div className="video" ref={videoRef} style={{
                    display: videoPlayed ? "block" : "none"
                }} dangerouslySetInnerHTML={{
                    __html: `
                <video 
                loop 
                muted 
                autoplay 
                playsinline 
                muted 
                defaultMuted 
                loop
                poster="${thumbnail}"  
                >
                 <source src=${video}  type="video/mp4" alt="content" />
                  </video>
        `}}>
                </div>
)

In the above code, There'll be a placeholder image. If the video is able to autoplay, then video will be start playing. In some cases, the video still isn't played, also there is no error, So to fix that, I've added a event listener for click, which'll play the video.

Thanks @DarshShah, @JaromandaX, @MohamdImran For helping me solving this issue!

Answer 1

Just click on the autoplay option that is showing in youtube..

Answer 2

In Some mobile devices, autoplay is only allowed if the video is triggered by a user interaction, such as a tap. Therefore, you can use a button or other UI element to start the video. Further, you can align its CSS class display:none So there is no button visible.

import React, { useRef } from 'react';

const AutoPlayVideoWithButton = () => {
  const videoRef = useRef(null);

  const handleButtonClick = () => {
    videoRef.current.play();
  };

  return (
    <div>
      <video ref={videoRef} playsInline>
        <source src="your-video.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <button onClick={handleButtonClick}>Play Video</button>
    </div>
  );
};

export default AutoPlayVideoWithButton;