为什么HTML video标签添加autoplay属性后仍无法自动播放？

自动播放失效的常见原因及修复方案 #

• 协议混合内容拦截
  你当前使用的视频资源是HTTP协议地址，如果你的站点部署在HTTPS域名下，浏览器会默认拦截HTTP非安全资源加载，导致视频无法加载，自然无法触发自动播放。
  修复：将视频地址替换为HTTPS协议，或使用协议相对路径写法 //ticket-t01.s3.eu-central-1.amazonaws.com/${props.urlPrefix}-intro.mp4 自动适配当前站点的协议。

• JSX属性写法错误
  你当前使用的是React JSX语法，原生HTML的小写属性在JSX中需要用小驼峰格式：

  • 原生的autoplay属性需要改为autoPlay
  • 原生的playsinline属性需要改为playsInline
  • minHeight不是video标签的原生支持属性，需要移到style对象中声明，放在标签上不会生效。

• 资源加载异常

  1. S3存储桶未配置正确的CORS跨域规则，你的站点域名没有被加入允许访问的列表，导致浏览器跨域拦截视频资源请求。
  2. props.urlPrefix取值时序问题：组件渲染时props.urlPrefix还未拿到正确值，导致生成的视频地址404无法加载。
  3. 视频文件本身编码不符合浏览器要求，部分非H.264编码的MP4文件无法被浏览器正常解析。
     修复：先打印生成的完整视频地址，直接在浏览器地址栏访问确认可以正常播放；再检查S3的CORS配置，允许你的站点域名跨域访问资源。

• 兜底兼容处理
  部分浏览器在用户首次访问站点、未产生任何点击/触摸交互之前，即使是静音视频也会限制自动播放，可以加手动触发的兜底逻辑：

import { useRef, useEffect } from 'react';

// 组件内逻辑
const videoRef = useRef(null);

useEffect(() => {
  const playVideo = async () => {
    if (!videoRef.current) return;
    try {
      await videoRef.current.play();
    } catch (err) {
      // 自动播放失败时可提示用户点击页面触发播放
      console.log('自动播放被拦截', err);
    }
  }
  playVideo();
}, []);

// 修正后的video标签
<video
  ref={videoRef}
  width="100%"
  autoPlay
  muted
  loop
  playsInline
  style={{
    position: "absolute",
    left: 0,
    top: 0, // 原代码的center是无效样式属性，修正为top
    right: 0,
    bottom: 0,
    zIndex: -1,
    minHeight: "100%"
  }}
>
  <source
    src={`https://ticket-t01.s3.eu-central-1.amazonaws.com/${props.urlPrefix}-intro.mp4`}
    type="video/mp4"
  />
</video>

内容的提问来源于stack exchange，提问作者János