防止移动设备自动全屏播放视频，让视频在页面内嵌位置正常播放

playsinline 属性在移动设备上非常重要，它解决了iOS Safari等浏览器的特殊播放行为问题。

核心作用

防止移动设备自动全屏播放视频，让视频在页面内嵌位置正常播放。

不同平台的表现对比

没有 playsinline：

• iOS Safari：自动全屏播放

• 其他浏览器：通常在页面内播放

有 playsinline：

• 所有平台：都在页面内嵌位置播放

详细解释

1. iOS Safari的特殊行为

iOS Safari默认将<video>元素视为"播放器"，点击播放时会：

• 强制进入全屏模式

• 脱离当前页面布局

• 播放完成后需要手动退出全屏

  <!-- 没有 playsinline -->
  <video autoplay>
    <source src="video.webm">
  </video>
  <!-- iOS会全屏播放 -->

  2. 使用 playsinline 后

  <video autoplay playsinline>
    <source src="video.webm">
  </video>
  <!-- 在页面内嵌位置播放 -->

  实际应用场景

  场景1：背景视频

  <div class="hero-section">
    <video autoplay loop muted playsinline class="bg-video">
      <source src="bg.webm">
    </video>
    <div class="content">
      <h1>页面标题</h1>
      <p>视频作为背景，内容在上面显示</p>
    </div>
  </div>
  
  <style>
  .hero-section {
    position: relative;
    height: 100vh;
  }
  
  .bg-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  
  .content {
    position: relative;
    z-index: 1;
    color: white;
  }
  </style>

  ✅ 有playsinline ：视频作为背景正常显示

  ❌ 没有playsinline：iOS会弹到全屏，破坏背景效果

  场景2：视频列表中的小视频

  <div class="video-grid">
    <div class="video-item">
      <video muted playsinline controls>
        <source src="video1.webm">
      </video>
      <p>视频标题1</p>
    </div>
    <div class="video-item">
      <video muted playsinline controls>
        <source src="video2.webm">
      </video>
      <p>视频标题2</p>
    </div>
  </div>

  场景3：内嵌教程视频

  <article>
    <h2>操作教程</h2>
    <p>第一步：点击这里...</p>
    
    <div class="tutorial-video">
      <video muted playsinline controls>
        <source src="tutorial.webm">
      </video>
    </div>
    
    <p>第二步：继续操作...</p>
  </article>

  常见组合使用

  1. 自动播放背景视频组合

  <video autoplay loop muted playsinline preload="auto">
    <!-- 完美组合 -->
  </video>

  2. 用户触发的内嵌视频

  <video playsinline controls preload="metadata">
    <!-- 用户点击播放按钮 -->
  </video>

  重要注意事项

  1. 必须配合的属性

  <!-- 正确 -->
  <video autoplay muted playsinline>...</video>
  
  <!-- iOS 16+ 可能需要 -->
  <video autoplay muted playsinline webkit-playsinline>...</video>

  2. iOS的兼容性写法

  <video 
    autoplay 
    loop 
    muted 
    playsinline 
    webkit-playsinline
    x5-playsinline  <!-- 部分安卓浏览器 -->
    t7-playsinline  <!-- 其他安卓变体 -->
  >
    <source src="video.webm">
  </video>

  3. JavaScript中的设置

  const video = document.querySelector('video');
  
  // 设置playsinline属性
  video.setAttribute('playsinline', '');
  video.setAttribute('webkit-playsinline', '');
  
  // 或者通过属性设置
  video.playsinline = true;
  
  // 注意：这个属性只在移动设备上有意义
  if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
    video.setAttribute('playsinline', '');
  }

  兼容性总结

  浏览器/平台	playsinline 支持	备注
  iOS Safari	✅ 需要	必须使用，否则全屏
  Chrome Android	✅ 支持	通常自动内联播放
  Firefox Android	✅ 支持	良好支持
  桌面浏览器	⚠️ 忽略	属性存在但无效果

  关键结论 ：对于需要在移动设备上内嵌播放 的视频，总是添加playsinline属性，特别是在需要自动播放或作为背景视频的场景中。