看片午夜激情国产,999在线看国产,免费三级片中文字慕

視頻剪輯提供單獨預覽Timeline的能力，您可以根據實際需求在前端頁面文件中引入。通過閱讀本文，您可以了解如何接入預覽組件Web SDK。

使用說明

預覽組件Web SDK版本號同視頻剪輯Web SDK，本文中引入的預覽組件Web SDK的版本號4.10.2僅供參考。

操作步驟

引入預覽組件Web SDK。

在項目前端頁面文件中的<head>標簽處引入預覽組件Web SDK的CSS文件。

<head>
 <link rel="stylesheet" >
</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接口（http://bestwisewords.com/document_detail/454911.html），通過mediaId獲取圖片URL；當mediaType為audio或video時調用getPlayInfo接口（http://bestwisewords.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" >
</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>

日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

接入預覽組件Web SDK

使用說明

操作步驟

示例代碼

相關參考