1. 使用HTML5 <video>标签
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
您的浏览器不支持HTML5 video标签
</video>关键属性说明：
-
autoplay：页面加载后自动播放
-
loop：循环播放
-
muted：静音（多数浏览器要求静音才能自动播放）
-
playsinline：在移动设备上内联播放
2. 使用JavaScript控制
<video id="myVideo" muted playsinline>
<source src="video.webm" type="video/webm">
</video>
<script>
document.addEventListener('DOMContentLoaded', function() {
const video = document.getElementById('myVideo');
// 设置循环
video.loop = true;
// 尝试播放视频
video.play().catch(function(error) {
console.log('自动播放失败:', error);
// 可以在这里添加用户交互后播放的逻辑
});
});
</script>3. 响应式视频示例
<video autoplay loop muted playsinline
style="width: 100%; height: auto; max-width: 100%;">
<source src="video.webm" type="video/webm">
<!-- 可添加其他格式作为备选 -->
<source src="video.mp4" type="video/mp4">
</video>4. CSS背景视频示例
<div class="video-container">
<video autoplay loop muted playsinline class="bg-video">
<source src="video.webm" type="video/webm">
</video>
<div class="content">
<!-- 页面内容 -->
</div>
</div>
<style>
.video-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.bg-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: -1;
}
.content {
position: relative;
z-index: 1;
color: white;
}
</style>5. 重要注意事项
-
自动播放策略 ：现代浏览器（Chrome、Safari等）要求视频必须静音才能自动播放
-
性能考虑：循环播放的视频应尽量压缩，避免影响页面性能
-
移动设备 ：移动端可能需要添加
playsinline属性防止全屏播放 -
备用格式：建议同时提供MP4格式作为备选，确保兼容性
6. 使用HTML + JavaScript + CSS完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebM循环播放示例</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.hero-section {
position: relative;
height: 100vh;
overflow: hidden;
}
#backgroundVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 40vh;
}
</style>
</head>
<body>
<div class="hero-section">
<video id="backgroundVideo" autoplay loop muted playsinline>
<source src="your-video.webm" type="video/webm">
<source src="your-video.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
<div class="content">
<h1>标题内容</h1>
<p>视频正在自动循环播放</p>
<button onclick="toggleMute()">切换静音</button>
</div>
</div>
<script>
function toggleMute() {
const video = document.getElementById('backgroundVideo');
video.muted = !video.muted;
}
</script>
</body>
</html>记得将src属性中的视频路径替换为你自己的视频文件路径。