如何使用jQuery实现点击按钮播放iframe中的MP4视频？

你的代码无法生效，核心原因有两个：

• 直接加载MP4文件的iframe内部是浏览器默认的视频播放器，不存在可被JS直接访问的<video>DOM元素，trigger("play")找不到可执行的目标。
• 跨域限制会阻止主页面操作不同域名下iframe的内容（示例中的MP4存储在谷歌公共桶，属于跨域场景）。

下面提供两种可行的解决方式：

方案一：替换为video标签（最简单直接） #

放弃iframe，直接用<video>标签嵌入视频，这样可以直接通过JS控制播放：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="playBtn">播放视频</button>
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" width="640" height="360"></video>

<script>
$("#playBtn").click(function() {
  // 调用video元素的原生play方法
  $("video")[0].play();
});
</script>

方案二：必须使用iframe的处理方式 #

如果业务需求必须用iframe，需要把MP4放在一个独立的HTML页面中，通过postMessage实现主页面与iframe的通信：

1. 新建视频播放页（命名为video-player.html）：

<video id="player" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" width="640" height="360"></video>

<script>
// 监听来自主页面的消息
window.addEventListener("message", function(event) {
  if (event.data === "playVideo") {
    document.getElementById("player").play();
  }
});
</script>

2. 主页面代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="playBtn">播放视频</button>
<iframe id="videoFrame" src="video-player.html" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

<script>
$("#playBtn").click(function() {
  // 向iframe发送播放指令
  document.getElementById("videoFrame").contentWindow.postMessage("playVideo", "*");
});
</script>

内容的提问来源于stack exchange，提问作者matt.mcg