如何使用iframe实现本地视频自动播放？

你现有的实现无法触发自动播放有两个核心原因：

• ?autoplay=1是YouTube、Vimeo这类平台自定义的查询参数，仅对平台的动态响应页面生效，本地静态MP4属于静态资源，服务器不会识别处理该参数，也不会自动注入播放逻辑。
• iframe的allow="autoplay"仅用于授权iframe内嵌页面的自动播放权限，你直接将iframe指向MP4文件时，浏览器会调用内置的默认媒体预览页，该页面没有自动触发播放的逻辑，因此授权不生效。

方案1：直接使用原生video标签（最优，适配本地视频场景） #

本地视频不需要用iframe承载，直接用HTML原生<video>标签即可实现自动播放，注意需要添加muted属性才能符合当前主流浏览器的自动播放策略（有声自动播放需要用户先和页面产生交互，比如点击任意区域）：

<template>
  <section id="vision" class="vision">
    <video 
      src="videos/cgi_neutral.mp4" 
      autoplay 
      muted 
      loop 
      playsinline
      controls
    ></video>
  </section>
</template>

属性说明：

• autoplay：页面加载完成后自动播放
• muted：静音播放，是无交互自动播放的必填条件
• loop：可选，循环播放
• playsinline：可选，适配移动端内嵌播放，不会自动全屏
• controls：可选，显示播放控制条，不需要可以删除

方案2：必须使用iframe的场景 #

如果业务要求必须用iframe承载，不能直接指向MP4文件，需要单独创建一个HTML页面放置视频，再让iframe指向这个HTML页面：

1. 新建video-player.html放在和MP4同目录，内容如下：

<!DOCTYPE html>
<html>
<body style="margin:0;padding:0">
  <video 
    src="cgi_neutral.mp4" 
    autoplay 
    muted 
    loop 
    playsinline
    width="100%"
    height="100%"
  ></video>
</body>
</html>

2. 修改原有iframe的src指向这个HTML页面：

<template>
  <section id="vision" class="vision">
    <iframe 
      src="videos/video-player.html" 
      allow="autoplay" 
      allowfullscreen="true"
      frameborder="0"
    ></iframe>
  </section>
</template>

补充说明 #

如果需要实现有声自动播放，需要先引导用户完成一次页面交互（比如点击按钮）后，再通过JS调用视频的play()方法，示例：

// 示例：用户点击页面后播放有声视频
document.body.addEventListener('click', () => {
  const video = document.querySelector('video')
  video.muted = false
  video.play()
}, { once: true })

内容的提问来源于stack exchange，提问作者Artur Müller Romanov