如何在VideoJs播放器内（非控制栏）添加自定义跳过片头按钮

要实现画面上层的跳过片头按钮，核心思路是不依赖VideoJS内置的控制栏组件体系，直接创建独立DOM元素挂载到播放器根容器，通过CSS定位到视频画面上，最后绑定逻辑即可。

步骤1：创建按钮并挂载到播放器容器 #

不用videojs.Component生成按钮（默认会加入控制栏），直接用原生JS创建元素，添加到包含视频的外层容器：

const player = videojs('my-video');

// 生成跳过按钮
const skipButton = document.createElement('button');
skipButton.className = 'vjs-skip-intro';
skipButton.textContent = '跳过片头';

// 获取播放器根容器（包含视频和控制栏的外层节点）
const playerContainer = player.el();
playerContainer.appendChild(skipButton);

步骤2：用CSS定位按钮到画面上层 #

通过绝对定位让按钮悬浮在视频画面上，同时避开控制栏区域：

.vjs-skip-intro {
  position: absolute;
  bottom: 80px; /* 避开底部控制栏，预留间距 */
  right: 20px;
  padding: 8px 16px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  z-index: 1000; /* 确保层级高于视频和控制栏 */
  display: none; /* 默认隐藏，按需显示 */
}

.vjs-skip-intro:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

步骤3：绑定跳过逻辑与播放器事件 #

处理按钮点击跳转，以及播放器状态变化控制按钮显隐：

// 假设片头时长为10秒，可根据实际需求修改
const introDuration = 10;

// 播放开始时，若当前处于片头阶段则显示按钮
player.on('play', () => {
  skipButton.style.display = player.currentTime() < introDuration ? 'block' : 'none';
});

// 播放过程中，超过片头时长自动隐藏按钮
player.on('timeupdate', () => {
  if (player.currentTime() >= introDuration) {
    skipButton.style.display = 'none';
  }
});

// 点击按钮跳转到片头结束位置并隐藏按钮
skipButton.addEventListener('click', () => {
  player.currentTime(introDuration);
  skipButton.style.display = 'none';
});

额外提示 #

• 可根据需求调整按钮样式（比如圆角、字体大小）或添加过渡动画；
• 若需适配全屏模式，可监听fullscreenchange事件，动态调整按钮的bottom值，避免被全屏控制栏遮挡。

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