如何在给定HTML代码中正确添加MP4视频？

原代码的问题 #

你提供的代码存在两处关键错误：

• 错误地将视频的src、type属性直接写在.jarallax的div标签上，Jarallax不支持这种配置方式
• video标签结构混乱，未正确嵌套在容器内部，标签闭合逻辑也有误

两种正确实现方式 #

方式一：使用Jarallax的data属性（推荐）

这种写法最简洁，Jarallax会自动处理视频的静音、循环、自动播放等基础设置：

<div class="cover-v1 jarallax" id="home-section" data-jarallax-video="video/cover_bg_2.mp4">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-7 mx-auto text-center">
        <h1 class="heading gsap-reveal-hero">CODEx Creators</h1>
        <h2 class="subheading gsap-reveal-hero">人工智能大师</h2>
      </div>
    </div>
  </div>
</div>

方式二：嵌套完整的video标签

如果需要更灵活控制视频属性，可以手动嵌套video标签，注意添加必要的播放属性：

<div class="cover-v1 jarallax" id="home-section">
  <!-- 给视频标签添加jarallax-video类，同时配置静音、循环等属性 -->
  <video class="jarallax-video" muted loop autoplay playsinline>
    <source src="video/cover_bg_2.mp4" type="video/mp4">
  </video>
  
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-7 mx-auto text-center">
        <h1 class="heading gsap-reveal-hero">CODEx Creators</h1>
        <h2 class="subheading gsap-reveal-hero">人工智能大师</h2>
      </div>
    </div>
  </div>
</div>

重要注意点 #

• 确保视频文件路径正确，比如video/cover_bg_2.mp4要与当前HTML文件的相对路径匹配
• 现代浏览器要求视频必须静音才能自动播放，所以muted属性不可省略
• playsinline属性用于避免视频在移动端自动全屏播放

内容的提问来源于stack exchange，提问作者sahan ruwanga