如何实现单个iframe播放时自动暂停其他外部托管视频的iframe？

要实现Bunny CDN嵌入的iframe视频互斥播放（播放一个时自动暂停其他），核心是利用postMessage跨域通信监听播放事件并控制其他视频——因为iframe跨域无法直接操作内部DOM。

步骤1：HTML结构调整 #

给所有Bunny视频iframe添加统一类名，方便批量选择：

<iframe class="bunny-video-iframe" src="https://your-bunny-video-url-1" frameborder="0" allow="autoplay; fullscreen"></iframe>
<iframe class="bunny-video-iframe" src="https://your-bunny-video-url-2" frameborder="0" allow="autoplay; fullscreen"></iframe>
<!-- 剩余3个iframe同理 -->

步骤2：原生JavaScript实现 #

// 获取所有Bunny视频iframe
const bunnyIframes = document.querySelectorAll('.bunny-video-iframe');

// 监听iframe发送的消息
window.addEventListener('message', (event) => {
  // 验证消息来源（替换为你的Bunny CDN域名/自定义域名，提升安全性）
  if (!event.origin.includes('bunnycdn.com')) return;

  // 捕获视频播放事件
  if (event.data?.eventType === 'play') {
    // 定位当前正在播放的iframe
    const playingIframe = [...bunnyIframes].find(iframe => iframe.contentWindow === event.source);
    if (!playingIframe) return;

    // 暂停其他所有iframe视频
    bunnyIframes.forEach(iframe => {
      if (iframe !== playingIframe) {
        iframe.contentWindow.postMessage({ command: 'pause' }, '*');
      }
    });
  }
});

// 页面加载完成后，给所有iframe启用事件监听
window.addEventListener('load', () => {
  bunnyIframes.forEach(iframe => {
    iframe.contentWindow.postMessage({ command: 'enableEvents' }, '*');
  });
});

步骤3：jQuery实现（如果项目依赖jQuery） #

$(document).ready(function() {
  const $bunnyIframes = $('.bunny-video-iframe');

  // 监听跨域消息
  $(window).on('message', function(event) {
    const e = event.originalEvent;
    // 验证消息来源
    if (!e.origin.includes('bunnycdn.com')) return;

    // 处理播放事件
    if (e.data?.eventType === 'play') {
      const playingIframe = $bunnyIframes.filter(function() {
        return this.contentWindow === e.source;
      })[0];

      // 暂停其他视频
      $bunnyIframes.each(function() {
        if (this !== playingIframe) {
          this.contentWindow.postMessage({ command: 'pause' }, '*');
        }
      });
    }
  });

  // 启用iframe事件监听
  $bunnyIframes.each(function() {
    this.contentWindow.postMessage({ command: 'enableEvents' }, '*');
  });
});

关键注意事项 #

• 域名验证：务必将event.origin.includes('bunnycdn.com')替换为你的Bunny CDN自定义域名（如果有），避免接收恶意跨域消息。
• 播放器设置：登录Bunny CDN后台，确保你的播放器已开启「Enable JavaScript API」选项（默认开启，若未生效检查此设置）。
• video标签失效原因：直接用video标签加载Bunny CDN链接可能因流媒体格式（如HLS）不兼容原生video标签导致失效，iframe嵌入官方播放器是更稳定的方案。

内容的提问来源于stack exchange，提问作者kavya cv