如何接入预览组件WebSDK_视频点播(VOD)-阿里云帮助中心

视频剪辑提供单独预览Timeline的能力，您可以根据实际需求在前端页面文件中引入。通过阅读本文，您可以了解如何接入预览组件Web SDK。

使用说明

预览组件Web SDK版本号同视频剪辑Web SDK，本文中引入的预览组件Web SDK的版本号4.10.2仅供参考。

操作步骤

引入预览组件Web SDK。

在项目前端页面文件中的<head>标签处引入预览组件Web SDK的CSS文件。

<head>
 <link rel="stylesheet" href="https://g.alicdn.com/thor-server/video-editing-websdk/4.10.2/player.css">
</head>

在<body>标签处添加一个用以挂载预览界面的<div>节点，并在<body>标签末尾添加引入Web SDK的JS文件，同时添加一个用以调用Web SDK的<script>节点。

<body>
 <div id="player-wrapper" style="height:500px"></div> // 您可以根据需要改变 container 高度
 <script src="https://g.alicdn.com/thor-server/video-editing-websdk/4.10.2/player.js"></script>
 <script>
 // 调用 SDK 的代码放在这里
 </script>
</body>

初始化预览组件Web SDK。

const player = new window.AliyunTimelinePlayer({
  container: document.querySelector('#player-wrapper'),
  timeline: {
    VideoTracks: [], // 省略 VideoTracks 的内容
    AudioTracks: [], // 省略 AudioTracks 的内容
    AspectRatio: '16:9',
  },
  getMediaInfo: (mediaId) => {
    return Promise.resolve('https://example.com/url/for/this/media.mp4');
  },
});

初始化实例new window.AliyunTimelinePlayer(PlayerInitConfig)中的参数PlayerInitConfig说明如下：

interface PlayerInitConfig {
  container: Element; // 预览组件的容器，HTML 元素
  locale?: Locales; // 界面语言，可选 'zh-CN' | 'en-US'，默认 'zh-CN'
  controls?: boolean; // 是否显示底部的播控栏，默认 true
  timeline?: AliyunTimeline; // WebSDK 生成的 timeline 对象，需要注意与 OpenAPI 的 timeline 不完全一致
  playbackRate?: number; // 初始化时的播放速度，默认是 1。注意，该值的范围与浏览器本身对 video 的 playbackRate 限制有关
  aspectRatio?: string; // 初始化时的画面比例，默认是 '16:9'。可自定义宽高比，以英文冒号相连。建议与制作 AliyunTimeline 时的画面比例一致
  getMediaInfo?: (mediaId: string,mediaType: string) => Promise<string>; // 当mediaType为image时调用getImageInfo接口（https://help.aliyun.com/document_detail/454911.html），通过mediaId获取图片URL；当mediaType为audio或video时调用getPlayInfo接口（https://help.aliyun.com/document_detail/436555.html），通过mediaId获取音视频播放URL
}

AliyunTimelinePlayer类的定义如下：

class AliyunTimelinePlayer {
  constructor(config: PlayerInitConfig); // 见前述
  play(): void; // JS 控制播放
  pause(): void; // JS 控制暂停
  destroy(): boolean; // 销毁实例
  on(eventName: string, callback: Function): void; // 监听事件
  get version(): string; // 获取版本号
  get duration(): number; // 获取总时长，单位为秒
  get timeline(): AliyunTimeline; // 获取当前的 AliyunTimeline
  set timeline(timeline: AliyunTimeline); // 设置 AliyunTimeline
  get currentTime(): number; // 获取当前时刻，与 video 元素相同，单位为秒
  set currentTime(currentTime: number); // 跳转到某个时刻
  get controls(): boolean; // 获取当前是否展示播控条
  set controls(controls: boolean); // 设置是否展示播控条
  get aspectRatio(): string; // 获取当前的画面比例
  set aspectRatio(aspectRatio: string); // 设置画面比例。注意，修改画面比例可能会导致预览画面与制作 AliyunTimeline 时所看到的不一致，不建议修改
  get playbackRate(): number; // 获取当前的播放速度
  set playbackRate(playbackRate: number); // 设置播放速度。注意，该值的范围与浏览器本身对 video 的 playbackRate 限制有关
}

释放实例。
使用destroy方法可以释放实例，释放后容器为空元素。
```
player.destroy();
```

示例代码

本文中的示例为完整示例，实现功能：创建一个按钮，单击后将当前Timeline快进5秒。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Player</title>
  <link rel="stylesheet" href="https://g.alicdn.com/thor-server/video-editing-websdk/4.10.2/player.css">
</head>
<body>
  <div id="player-wrapper" style="height: 500px"></div>
  <div id="button" style="display: inline-block; border: 1px solid black; cursor: pointer;">前进5秒</div>
  <script src="https://g.alicdn.com/thor-server/video-editing-websdk/4.10.2/player.js"></script>
  <script>
    const player = new window.AliyunTimelinePlayer({
      container: document.querySelector('#player-wrapper'),
      timeline: {
        "VideoTracks": [
          {
            "Id": 0,
            "Type": "Video",
            "Visible": true,
            "Count": 1,
            "VideoTrackClips": [
              {
                "Type": "Video",
                "Id": 1,
                "TrackId": 0,
                "MediaId": "02221f97802947ecbffee7eb8cd85d20",
                "Title": "最美中国纪录片-智能字幕.mp4",
                "In": 0,
                "Out": 14.023,
                "X": 0,
                "Y": 0,
                "Width": 1,
                "Height": 1,
                "TimelineIn": 0,
                "TimelineOut": 14.023,
                "Duration": 14.023,
                "VirginDuration": 14.023,
              }
            ]
          }
        ],
        "AudioTracks": [],
        "AspectRatio": "16:9"
      },
      getMediaInfo: (mediaId) => {
        return Promise.resolve('https://ice-pub-media.myalicdn.com/vod-demo/%E6%9C%80%E7%BE%8E%E4%B8%AD%E5%9B%BD%E7%BA%AA%E5%BD%95%E7%89%87-%E6%99%BA%E8%83%BD%E5%AD%97%E5%B9%95.mp4');
      }
    });
    const button = document.querySelector('#button');
    button.addEventListener('click', () => {
      player.currentTime = player.currentTime + 5;
    });
  </script>
</body>
</html>

使用说明

操作步骤

示例代码

相关参考