To make HTML5 videos automatically play when the page loads, you must use the autoplay and muted properties, as modern browsers usually prevent automatic playback with sound. 1. Add the autoplay attribute to enable automatic playback; 2. Muted attribute must be added at the same time to meet the browser's mute requirements; 3. It is recommended to add the playsinline attribute to ensure normal inline playback on iOS devices; 4. Add the controls attribute to allow users to manually control playback, volume and mute; 5. Use the .mp4 (H.264) format to ensure the widest compatibility; 6. Control the video file size to avoid loading delays. The complete and reliable way to write it is:

To make an HTML5 video autoplay when the page loads, you need to use the autoplay
attribute in your <video></video>
tag. However, there are a few important details to get it working reasonably across browsers — especially because modern browsers often require additional conditions for autoplay to work.

? Use the autoplay
attribute
Add autoplay
directly to the <video></video>
element:
<video autoplay>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
But this alone might not be enough.

? Why Autoplay Might Not Work
Most modern browsers (like Chrome, Firefox, Safari) block autoplay if the video has sound. This is to prevent unwanted noise. So, to reliably autoplay a video, you typically need to mute the audio .
? Combine autoplay
with muted
<video autoplay muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
? This combination usually works across all major browsers.

? Optional: Allow user to unmute
If you want sound, you can start muted and let users choose to unmute:
<video autoplay muted controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The controls
attribute adds play/pause, volume, and mute buttons so users can unmute if desired.
? Best Practices & Tips
Use muted
: Required for autoplay in most cases.
Use playsinline
(especially on iOS): Prevents fullscreen autoplay on iPhones.
<video autoplay muted playsinline>
<source src="video.mp4" type="video/mp4">
</video>
Supported formats : Use .mp4
(H.264) for widest compatibility.
Keep file size reasonable : Large videos may delay page load or fail to start quickly.
? Full Working Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Autoplay Video</title>
</head>
<body>
<video autoplay muted playsinline width="600" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
</body>
</html>
This should autoplay on most devices, including mobile, as long as it's muted.
Basically, just remember:
autoplay
muted
= reliable autoplay .
Add playsinline
for mobile support, and controls
for user interaction.
The above is the detailed content of How to make an HTML5 video autoplay on page load. For more information, please follow other related articles on the PHP Chinese website!