Autoplay is browser-permitted behavior, not a guarantee. Muted video or video without an audio track is generally easier to autoplay than audible media. playsinline also matters for inline playback on iPhone. 12
Start with simple markup
<video autoplay muted playsinline controls preload="metadata"
poster="/media/preview.jpg">
<source src="/media/demo.mp4" type="video/mp4">
</video>
Replace the example assets with your own. Controls provide a manual-play option. A decorative background and an informative video may need different control designs, but neither should depend on an unhandled autoplay assumption.
When starting playback in JavaScript, handle rejection of the promise returned by video.play() and show a visible play button. Do not hide the interface while assuming playback must begin. 1
Check more than autoplay
If tapping play fails too, inspect the media request and supported encoding. A missing file will not start working because you added muted.
Test on a real iPhone with relevant browser and device settings. User preferences and power-saving behavior can affect the result, so retain a fallback.
Important information should not exist only inside automatically playing media. Provide a text alternative where needed and appropriate captions for meaningful video content.
