ReactJS实现播放iframe内嵌视频时隐藏slider的前后按钮

首先给slider的前后按钮定义一个隐藏用的样式类：

/* 替换为你实际的按钮类名 */
.slider-prev, .slider-next {
  transition: opacity 0.2s ease;
}
.slider-btn-hidden {
  opacity: 0;
  pointer-events: none;
  /* 也可以用display: none，看你的动画需求 */
}

之后根据你嵌入的视频类型选择对应的实现逻辑： #

场景1：嵌入YouTube视频 #

你需要先给iframe的src拼接参数?enablejsapi=1开启API权限，再通过YouTube播放器API监听播放状态：

// 加载YouTube播放器API
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;
// API加载完成后初始化播放器实例
function onYouTubeIframeAPIReady() {
  // 替换为你的iframe元素ID
  player = new YT.Player('video-iframe', {
    events: {
      'onStateChange': handleVideoStateChange
    }
  });
}

function handleVideoStateChange(event) {
  const prevBtn = document.querySelector('.slider-prev');
  const nextBtn = document.querySelector('.slider-next');
  // 视频播放时隐藏按钮
  if (event.data === YT.PlayerState.PLAYING) {
    prevBtn.classList.add('slider-btn-hidden');
    nextBtn.classList.add('slider-btn-hidden');
    // 如果用的是Swiper等组件，可以同时禁用滑动：swiper.allowSlideNext = swiper.allowSlidePrev = false
  } 
  // 视频暂停/结束/缓冲时显示按钮
  else if ([YT.PlayerState.PAUSED, YT.PlayerState.ENDED, YT.PlayerState.BUFFERING].includes(event.data)) {
    prevBtn.classList.remove('slider-btn-hidden');
    nextBtn.classList.remove('slider-btn-hidden');
    // 对应恢复滑动：swiper.allowSlideNext = swiper.allowSlidePrev = true
  }
}

场景2：嵌入Vimeo视频 #

通过Vimeo官方Player SDK监听状态即可：

// 先引入Vimeo Player SDK，可通过npm安装或直接引入CDN脚本
import Player from '@vimeo/player';

const iframe = document.querySelector('#video-iframe');
const player = new Player(iframe);
const prevBtn = document.querySelector('.slider-prev');
const nextBtn = document.querySelector('.slider-next');

// 播放时隐藏按钮
player.on('play', () => {
  prevBtn.classList.add('slider-btn-hidden');
  nextBtn.classList.add('slider-btn-hidden');
});

// 暂停/结束/拖动进度时显示按钮
['pause', 'ended', 'seeked'].forEach(eventName => {
  player.on(eventName, () => {
    prevBtn.classList.remove('slider-btn-hidden');
    nextBtn.classList.remove('slider-btn-hidden');
  });
});

场景3：嵌入自有同源站点视频 #

如果iframe是你自己站点的页面，可直接访问内部video元素绑定事件：

const iframe = document.querySelector('#video-iframe');
const prevBtn = document.querySelector('.slider-prev');
const nextBtn = document.querySelector('.slider-next');

iframe.addEventListener('load', () => {
  const innerVideo = iframe.contentDocument.querySelector('video');
  
  innerVideo.addEventListener('play', () => {
    prevBtn.classList.add('slider-btn-hidden');
    nextBtn.classList.add('slider-btn-hidden');
  });

  ['pause', 'ended', 'waiting'].forEach(eventName => {
    innerVideo.addEventListener(eventName, () => {
      prevBtn.classList.remove('slider-btn-hidden');
      nextBtn.classList.remove('slider-btn-hidden');
    });
  });
});

补充说明 #

如果使用Swiper、Slick等第三方Slider组件，建议在隐藏按钮的同时调用组件自带的禁用切换方法，避免用户通过滑动、键盘等其他方式切换滑块打断视频播放，交互更稳妥。

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