阿里云 Web 播放器自定义组件实战：实现快进/快退按钮

在使用 AliyunPlayer Web（阿里云 Web 播放器）时，我们通常可以通过键盘左右方向键实现视频的快进和快退控制。但在一些实际场景中（例如移动设备、触控屏设备、无键盘环境等），这种交互方式并不适用。

因此，一个更友好的方案是：在播放器控制栏中增加“快进 / 快退”按钮，让用户通过点击即可控制播放进度。

本文将带你从 0 到 1 实现一个自定义组件 —— SeekButtonsComponent。

一、准备工作：拉取官方组件库

首先，从阿里云官方组件仓库拉取代码：

https://github.com/aliyunvideo/AliyunPlayer_Web

进入目录：

1	customComponents

后续所有操作均在该目录下完成。

二、解决 Windows 构建问题（关键）

官方构建脚本依赖 build_customize.sh（Shell 脚本），在 Windows 环境下无法直接运行。

因此，我们对 build_script.js 做一个简单改造，使其兼容 Windows：

const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

const args = process.argv.slice(2);
const isDev = args.includes('--dev');
const componentNames = args.filter(arg => arg !== '--dev' && arg !== 'all');

const npmscript = isDev ? 'build_customize_dev' : 'build_customize';

let buildcommand = [];

if (componentNames.length === 0) {
  const componentsDir = path.join(__dirname, 'src', 'components');
  const dirs = fs.readdirSync(componentsDir);
  
  dirs.forEach(dir => {
    const fullPath = path.join(componentsDir, dir);
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory() && dir !== 'images') {
      buildcommand.push(`./src/components/${dir}/export.js`);
    }
  });
} else {
  componentNames.forEach(name => {
    const componentDir = `./src/components/${name}Component`;
    buildcommand.push(`${componentDir}/export.js`);
  });
}

buildcommand.push('./src/assets/scss/index.scss');

const command = `npm run ${npmscript} ${buildcommand.join(' ')}`;
console.log('Running:', command);

execSync(command, { stdio: 'inherit' });

三、安装依赖并启动开发环境

1 2	npm install npm run dev

如果一切正常，访问：

1	http://localhost:9000/

看到页面说明环境已搭建成功。

四、创建自定义组件 SeekButtonsComponent

在目录：

1	src/components

新建文件夹：

1	SeekButtonsComponent

并创建以下 4 个文件：

export.js
index.js
index.html
index.scss

五、组件代码实现

export.js（组件导出）

import SeekButtonsComponent from './index.js'

if (!window.AliPlayerComponent) {
  window.AliPlayerComponent = {}
}
window.AliPlayerComponent.SeekButtonsComponent = SeekButtonsComponent

作用说明：

挂载组件到全局 window.AliPlayerComponent
方便播放器初始化时直接引用

index.js（核心逻辑）

import seekButtonsHtml from "./index.html";
import "./index.scss";
import { parseDom } from "utils";

class SeekButtonsComponent {
  constructor(options = {}) {
    this.html = parseDom(seekButtonsHtml);
    this.options = options;
  }

  createEl(el) {
    let eleControlbar = el.querySelector(".prism-controlbar");
    eleControlbar.appendChild(this.html);
  }

  ready(player, e) {
    let rewindBtn = this.html.querySelector(".rewind");
    let forwardBtn = this.html.querySelector(".forward");

    let seekStep = this.options.step || 10;

    rewindBtn.onclick = () => {
      let currentTime = player.getCurrentTime();
      let newTime = Math.max(0, currentTime - seekStep);
      player.seek(newTime);
    };

    forwardBtn.onclick = () => {
      let currentTime = player.getCurrentTime();
      let duration = player.getDuration();
      let newTime = Math.min(duration, currentTime + seekStep);
      player.seek(newTime);
    };
  }
}

export default SeekButtonsComponent;

核心逻辑：

获取当前播放时间
根据步长（step）计算新时间
调用 player.seek() 实现跳转

index.html（结构）

<div class="seek-buttons-components">
  <span class="rewind">快退</span>
  <span class="forward">快进</span>
</div>

index.scss（样式）

.seek-buttons-components {
  float: right;
  color: #fff;
  height: 35px;
  position: relative;
  box-sizing: border-box;
  margin-top: 5px;
  margin-right: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  .rewind,
  .forward {
    padding: 5px 5px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    opacity: 0.8;
    transition: opacity 0.3s;

    &:hover {
      opacity: 1;
    }
  }
}

六、创建 Demo 页面验证效果

在 demo 目录新建：

1	seek-buttons.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>SeekButtonsComponent</title>
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.1/skins/default/aliplayer-min.css"
    />
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.26.1/aliplayer-min.js"
    ></script>
    <script src="./aliplayercomponents.js"></script>
  </head>
  <body>
    <div id="player-con"></div>
    <script>
      /* Make sure that the source video has multiple audio tracks */
      var player = new Aliplayer(
        {
          id: "player-con",
          source: "https://player.alicdn.com/video/aliyunmedia.mp4",
          width: "100%",
          height: "500px",
          autoplay: false,
          controlBarVisibility: "always",
          keyShortCuts: true,
          clickPause: true,
          components: [
            {
              name: "SeekButtonsComponent",
              type: AliPlayerComponent.SeekButtonsComponent,
              args: [{ step: 5 }],
            },
          ],
        },
        function (player) {
          console.log("The player is created");
        },
      );
    </script>
  </body>
</html>

七、运行并查看效果

1	npm run dev

访问：

1	http://localhost:9000/seek-buttons.html

此时你会看到播放器控制栏中已经出现：

「快退」和「快进」按钮 🎉

八、源码参考

https://github.com/xinyflove/AliyunPlayer_Web/tree/master/customComponents/src/components/SeekButtonsComponent