HTML <video> tag doesn't autoplay video on mobile IOS – Html

The Solutions:

Solution 1: Use `playsinline` and `muted` attributes

Starting from iOS 10, Apple introduced an autoplay policy that restricts videos from automatically playing with sound on web pages. To enable autoplay for videos on mobile iOS devices, you can use the playsinline attribute along with the muted attribute on the <video> tag.

Here’s how you can do this:

<video autoplay muted playsinline>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

The playsinline attribute ensures that the video will play within the same context as the webpage, rather than entering fullscreen mode. The muted attribute ensures that the video plays without sound, as sound autoplay is still restricted on iOS.

While this approach may enable autoplay on iOS devices, it’s important to note that autoplay may not work in all cases, as it ultimately depends on the specific iOS version, browser, and user settings. It’s always a good practice to provide a play button or another user-initiated action to start the video playback to ensure a consistent experience across different devices and platforms.

Solution 2: Support playsInline and provide an MP4 format

To address the autoplay issue on iOS, add the playsInline attribute to your <video> tag. This attribute indicates that the video should play within the webpage without triggering the full-screen video player, adhering to Apple’s autoplay policy. 

Since iOS does not natively support the WebM video format, also provide a fallback source using the MP4 format. Update your <video> tag to include both sources. Ensure that the MP4 video file exists at the specified path and is accessible. This approach ensures compatibility with both iOS and other browsers that support either WebM or MP4 formats.

Video Explanation:

The following video, titled "HTML Tutorial for Beginners: HTML Crash Course - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

HTML Tutorial for Beginners - Learn HTML for a career in web development. This HTML tutorial teaches you everything you need to get started.