要讓HTML5視頻在頁面加載時(shí)自動(dòng)播放，必須使用autoplay和muted屬性，因?yàn)楝F(xiàn)代瀏覽器通常會(huì)阻止帶聲音的自動(dòng)播放。 1. 添加autoplay屬性以啟用自動(dòng)播放；2. 必須同時(shí)添加muted屬性以滿足瀏覽器的靜音要求；3. 建議添加playsinline屬性以確保iOS設(shè)備上正常內(nèi)聯(lián)播放；4. 可添加controls屬性允許用戶手動(dòng)控製播放、音量和靜音；5. 使用.mp4（H.264）格式以確保最廣泛的兼容性；6. 控制視頻文件大小以避免加載延遲。完整的可靠寫法是：
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 reliably 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.
以上是如何在頁面上製作HTML5視頻自動(dòng)播放的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！