核心逻辑很直接：监听播放器的暂停、进度拖动相关事件，触发事件时用自定义内容覆盖原视频画面；恢复播放时隐藏自定义内容，回到原视频流。

Web端具体实现步骤 #

1. 搭建基础DOM结构 #

用容器包裹视频标签和自定义暂停画面元素，自定义画面默认隐藏：

<div class="player-container">
  <video id="videoPlayer" src="your-video-source.mp4" controls></video>
  <!-- 自定义暂停画面，可替换为图片、文案、广告等 -->
  <div class="custom-pause-screen" style="display: none;">
    <img src="custom-cover.jpg" alt="暂停画面">
    <p>点击播放继续观看</p>
  </div>
</div>

2. 设置样式实现覆盖效果 #

通过定位让自定义画面完全覆盖视频区域，层级高于视频标签：

.player-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16/9;
}
#videoPlayer {
  width: 100%;
  height: 100%;
}
.custom-pause-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 10;
}
.custom-pause-screen img {
  max-width: 80%;
  margin-bottom: 16px;
}

3. 监听事件控制画面切换 #

通过监听视频的pause、play、seeked（拖动进度条结束）事件，控制自定义画面的显示/隐藏：

const video = document.getElementById('videoPlayer');
const customScreen = document.querySelector('.custom-pause-screen');

// 暂停时显示自定义画面
video.addEventListener('pause', () => {
  customScreen.style.display = 'flex';
});

// 恢复播放时隐藏自定义画面
video.addEventListener('play', () => {
  customScreen.style.display = 'none';
});

// 处理拖动进度条后暂停的情况
video.addEventListener('seeked', () => {
  if (video.paused) {
    customScreen.style.display = 'flex';
  }
});

// 可选：拖动进度条过程中也显示自定义画面
video.addEventListener('seeking', () => {
  customScreen.style.display = 'flex';
});

原生端实现思路 #

iOS（基于AVPlayer） #

• 监听AVPlayerRateDidChangeNotification通知，当播放器速率变为0时（代表暂停），在AVPlayerLayer所在的View上添加自定义UIView覆盖；速率大于0时移除或隐藏该View。
• 监听进度拖动的回调（比如通过UISlider的拖动事件），拖动过程中显示自定义画面，拖动结束后根据播放状态决定是否保留。

Android（基于ExoPlayer） #

• 注册Player.Listener，重写onPlaybackStateChanged方法：当状态为STATE_PAUSED时，显示预先布局好的自定义暂停画面（比如放在FrameLayout中，层级高于PlayerView）；当状态变为STATE_READY且播放器处于播放状态时，隐藏自定义画面。

注意细节 #

• 自定义画面可以是静态资源、动态内容（如轮播广告）甚至小视频，只需替换对应DOM/View元素即可。
• 部分场景下需要处理视频播放结束的状态，可额外监听ended事件，显示结束专属画面。

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