Video not playing on mobile devices in React-CodePudding

The video is playing properly on any desktop or laptop, but when on mobile, specifically mobile Safari, the video is not playing. However the video is showing as an element with the correct styling. I have applied the playsInline and dangerouslySetInnerHTML solutions, but cannot get the video to play. The video is also 3.3mb and in the assets folder. Does anyone have any ideas on how to get the video to show and autoplay on mobile?

JSX:

            <div
              dangerouslySetInnerHTML={{
                __html: `
                <video
                  loop
                  muted={true}
                  autoPlay
                  playsInline={true}
                  id="video"
                >
                <source autoPlay muted={true} src="${video}" type="video/mp4" />
                </video>`,
              }}
            />

CodePudding user response：

Solved The Issue!

I checked the original mp4 codecs and it was AAC, H.264. I used HandBrake to decode the mp4 file and took the audio out as well. I am not too sure if the muted function was working correctly, but decoding the file seemed to do the trick.