阿里云播放器Aliplayer的简单使用

我正在参加「AdminJS·启航计划」

一、背景

这次的需求是一个视频引导组件，里面的视频播放器需要使用到阿里云的播放器Aliplayer。至于为什么架构设计中是选择用Aliplayer，可能是因为视频资源是采用的阿里云的OSS存储，同一生态的工具之间支持度会高一些。之前还没有使用过其他平台的SDK，这篇文章主要是记录一下Aliplayer的简单使用。

二、视频播放方案

视频播放的方案有很多种。

最简单的一种就是通过video标签引入视频URL，这种方法就是简单引入一个点播视频资源。

<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

这次的需求有鉴权和认证的要求，上面这个方案不满足，所以采用的是 VID + PlayAuth 的播放方案。

通过 VID 获取 对应的 PlayAuth，再携带 PlayAuth 请求视频资源，如果 PlayAuth 有效，就可以正常获取视频资源了。

这里的 VID 和 PlayAuth 都是后端接口获取，其中集成点播服务端SDK，处理自签名等内容由后端同学处理，这里就不详细说明了（其实想说也不会哈哈哈，有空和后端同学请教）

三、使用流程

1. 引入Aliplayer SDK

要使用Aliplayer，第一步肯定是要引入。需要注意的是，这里我们需要分别引入js和css资源。
大概的流程如下：

• 创建 script 和 link 标签
• 设置 script 和 link 标签的资源路径和资源类型
• 设置 script 和 link 标签 load 事件监听
• 添加 script 和 link 标签 到 head 标签中

load 事件监听的处理：

• 维护一个变量loadedCounter，记录已经加载的资源数量。
• 一个资源加载完毕后，loadedCounter + 1。然后判断loadedCounter === 2。如果loadedCounter === 2，说明资源加载完毕。
• 设置资源加载完毕的标志 AliplayerSDKLoaded 为 true，进行初始化操作。

const importAliplayerSDK = async () => {

    return new Promise((resolve, reject) => {
      // 引入阿里云播放器SDK相关资源
      // @ts-ignore
      if (!window.Aliplayer) {
        const scriptTag = document.createElement('script');
        const linkTag = document.createElement('link');
        let loadedCounter = 0;

        scriptTag.src = 'https://g.alicdn.com/de/prismplayer/2.12.1/aliplayer-min.js';
        scriptTag.type = 'text/javascript';
        scriptTag.addEventListener(
          'load',
          () => {
            loadedCounter++;
            if (loadedCounter === 2) {
              setAliplayerSDKLoaded(true)
              resolve({
                err: null,
                data: {
                  AliplayerSDKLoaded: true
                }
              })
            }
          },
          { once: true },
        );

        linkTag.rel = 'stylesheet';
        linkTag.href = 'https://g.alicdn.com/de/prismplayer/2.12.1/skins/default/aliplayer-min.css';
        linkTag.addEventListener(
          'load',
          () => {
            loadedCounter++;
            if (loadedCounter === 2) {
              setAliplayerSDKLoaded(true)
              resolve({
                err: null,
                data: {
                  AliplayerSDKLoaded: true
                }
              })
            }
          },
          { once: true },
        );

        const head = document.querySelector('head');
        head.appendChild(scriptTag);
        head.appendChild(linkTag);
      }
    })
  };

2. 实例化 Aliplayer

成功引入 Aliplayer SDK 后，我们就可以在window对象上获取到 Aliplayer 类。接下来要做的就是实例化 Aliplayer。
对于 VID + PlayAuth 的播放方案，VID + PlayAuth 是最核心的属性。

在实例化 Aliplayer 之前，必须先获取到对应的VID + PlayAuth

  var player = new Aliplayer({
    id: 'J_prismPlayer',
    width: '100%',
    vid: '<your video ID>',//必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
    playauth: '<your PlayAuth>',//必选参数。音视频播放凭证。
  }, function (player) {
    console.log('The player is created.')
  });

同时还可以指定Aliplayer挂载的容器Dom节点，宽高，控制项等等。 具体的api可以参考官方文档 接口说明

在实例化 Aliplayer 之后，可以通过 Aliplayer 实例注册播放器状态变化的事件监听函数。

instance.on('ready', () => {
          const el = document.querySelector(`#${mountedPointId}`);
          el.addEventListener('dblclick', () => {
            if (instance.fullscreenService.getIsFullScreen()) {
              instance.fullscreenService.cancelFullScreen();
            } else {
              instance.fullscreenService.requestFullScreen();
            }
          });
 });

instance.on('play', handlePlay);

instance.on('pause', handlePause);

instance.on('end', handleEnd);

当然，不要忘记在合适的时机移除事件监听函数，避免可能存在的内存泄漏。