文档

接入预览组件Web SDK

更新时间:

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

使用说明

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

操作步骤

  1. 引入预览组件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>
  2. 初始化预览组件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 限制有关
      }

  3. 释放实例。

    使用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>

相关参考

常见问题