在网页中实现WebM格式视频自动循环播放

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属性中的视频路径替换为你自己的视频文件路径。

在网页中实现WebM格式视频自动循环播放

1. 使用HTML5 <video>标签

关键属性说明：

2. 使用JavaScript控制

3. 响应式视频示例

4. CSS背景视频示例

5. 重要注意事项

6. 使用HTML + JavaScript + CSS完整示例

1. 使用HTML5 `<video>`标签