王新阳

一、核心 HTML5 属性

<video
  src="video.mp4"
  controls
  preload="metadata"
  poster="thumbnail.jpg"
  width="800"
  height="450"
  muted
  loop
  autoplay
  playsinline
  crossorigin="anonymous"
  class="video-player"
>
  <!-- 备用内容 -->
  <p>您的浏览器不支持 HTML5 视频</p>
</video>

二、针对 iOS/Safari 的关键属性

<video
  playsinline
  webkit-playsinline
  x5-playsinline
  t7-video-player-type="inline"
>

解释：
playsinline - 标准属性，防止 iOS 自动全屏
webkit-playsinline - WebKit 前缀版本（iOS 9-10 需要）
x5-playsinline - 腾讯 X5 内核（微信浏览器）
t7-video-player-type="inline" - 部分安卓浏览器

三、自动播放策略（iOS 限制）

<!-- iOS 允许自动播放的条件 -->
<video autoplay playsinline muted>
  <!-- 必须同时有：autoplay + playsinline + muted -->
</video>

<!-- 或使用 JavaScript 控制 -->
<video id="myVideo" playsinline controls>

// iOS 需要用户交互才能播放声音
document.addEventListener('touchstart', function() {
  const video = document.getElementById('myVideo');
  video.play().catch(e => console.log(e));
}, { once: true });

四、推荐的最佳实践配置

<video
  controls
  playsinline
  webkit-playsinline
  preload="metadata"
  poster="poster.jpg"
  width="100%"
  height="auto"
  style="object-fit: contain; background-color: #000;"
  crossorigin="anonymous"
  aria-label="视频描述"
>
  <!-- 多格式支持 -->
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- 备用内容 -->
  <p>您的浏览器不支持 HTML5 视频</p>
</video>

五、重要 CSS 补充

video {
  /* 防止 iOS 默认控件 */
  -webkit-appearance: none;
  
  /* 移除 iOS 的蓝色高光 */
  -webkit-tap-highlight-color: transparent;
  
  /* 禁用文本选择 */
  user-select: none;
  -webkit-user-select: none;
  
  /* 响应式 */
  max-width: 100%;
  height: auto;
  display: block;
}

六、微信浏览器特殊处理

<video
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portrait"
>