Skip to content

自动播放

页面加载时视频自动开始播放。

循环

视频播放结束后重复播放。

静音

大多数浏览器要求静音才能自动播放。

自动播放

页面加载时视频自动开始播放。

循环

视频播放结束后重复播放。

静音

大多数浏览器要求静音才能自动播放。

自动播放

页面加载时视频自动开始播放。

循环

视频播放结束后重复播放。

静音

大多数浏览器要求静音才能自动播放。

自动播放

页面加载时视频自动开始播放。

循环

视频播放结束后重复播放。

静音

大多数浏览器要求静音才能自动播放。

自动播放

页面加载时视频自动开始播放。

循环

视频播放结束后重复播放。

静音

大多数浏览器要求静音才能自动播放。

自动播放

页面加载时视频自动开始播放。

循环

视频播放结束后重复播放。

静音

大多数浏览器要求静音才能自动播放。

自动播放

页面加载时视频自动开始播放。

循环

视频播放结束后重复播放。

静音

大多数浏览器要求静音才能自动播放。

自动播放

页面加载时视频自动开始播放。

循环

视频播放结束后重复播放。

静音

大多数浏览器要求静音才能自动播放。

视频控制

主要关注点:配置视频背景的播放行为。

本页实际 Frontmatter 配置

yaml
---
layout: home
hero:
    background:
        type: video
        video:
            src: /videos/hero-bg.mp4
            autoplay: true
            loop: true
            muted: true
            playsinline: true
---

API 配置项

类型 默认值 说明
hero.background.video.src string 必填 视频文件路径
hero.background.video.autoplay boolean true 加载时自动播放
hero.background.video.loop boolean true 循环播放
hero.background.video.muted boolean true 静音
hero.background.video.playsinline boolean true 移动端内联播放

最佳实践

  • 为确保自动播放生效,请始终设置 muted: true
  • 使用优化的视频文件(WebM/MP4)
  • 提供封面图片用于加载状态