目錄

擴展功能示例

以下提供常用擴展功能的示例：

動態獲取視頻剪輯Web SDK的版本號

如果代碼中需要使用視頻剪輯Web SDK的版本號，建議動態獲取。

window.AliyunVideoEditor.version

自定義字幕默認文字

添加字幕時，默認字幕內容為“阿里云剪輯”，可以通過傳入參數defaultSubtitleText自定義默認字幕內容（字幕長度不超過20）。

window.AliyunVideoEditor.init({
  // 其他選項省略
  defaultSubtitleText: '自定義字幕默認文字'
})

自定義按鈕文案

視頻剪輯界面的導入素材、保存和導出視頻按鈕支持自定義文案，可以通過傳入參數customTexts實現。

window.AliyunVideoEditor.init({
  // 其他選項省略
  customTexts: {
    importButton: '自定義導入',
    updateButton: '自定義保存',
    produceButton: '自定義生成'
  }
})

修改默認預覽畫布比例

默認預覽畫布比例為16∶9，可以通過傳入參數defaultAspectRatio自定義默認預覽畫布比例。支持的畫布比例請參見PlayerAspectRatio。

window.AliyunVideoEditor.init({
  // 其他選項省略
  defaultAspectRatio: '9:16'
})

主動獲取Timeline數據

主動獲取Timeline數據后，如果對其數據進行修改，必須保證Timeline正確性，避免調用服務端接口出錯。

window.AliyunVideoEditor.getProjectTimeline()

自定義返回按鈕

默認視頻剪輯界面左上角沒有返回按鈕，可以通過實現響應函數onBackButtonClick自定義單擊返回按鈕之后的邏輯。

window.AliyunVideoEditor.init({
  // 其他選項省略
  onBackButtonClick: () => {
    window.location.href = '/mediaEdit/list'; // 點擊后跳轉到其他頁面，如工程列表頁
  }
})

自定義Logo

默認視頻剪輯界面左上角沒有Logo圖標，可以通過傳入參數customTexts自定義Logo圖標。

window.AliyunVideoEditor.init({
  // 其他選項省略
  customTexts: {
    logoUrl: 'https://www.example.com/assets/example-logo-url.png'
  }
})

自定義媒資導入界面

單擊導入素材按鈕后，可以通過實現函數searchMedia添加媒資導入界面。實現邏輯：搜索媒資信息后將媒資庫媒資導入到素材，再調用AddEditingProjectMaterials接口將選中的素材與工程關聯起來，返回的Promise對象需要resolve新增素材的數組。

自定義合成導出界面

單擊導出視頻按鈕后，可以通過實現函數produceEditingProjectVideo添加合成導出界面。實現邏輯：調出配置合成參數頁面后，該頁面上的提交按鈕的消息響應為提交剪輯合成作業接口ProduceEditingProjectVideo - 視頻合成，返回的Promise對象需要resolve。

除了實現上述功能外，函數produceEditingProjectVideo也可以固定合成參數（例如：存儲的Bucket、視頻格式等），阻止他人隨意修改，或在導出視頻前對Timeline進行業務層面的校驗。示例如下所示：

window.AliyunVideoEditor.init({
  // 省略其他選項
  produceEditingProjectVideo: ({ timeline }) => { // 用戶點擊“導出視頻”按鈕時該方法會被調用
    // 找出類型為字幕且軌道內片段數大于 0 的所有軌道
    const subtitleTracks = timeline.VideoTracks.filter((t) => t.Type === 'Subtitle' && t.VideoTrackClips.length > 0);
    if (subtitleTracks.length < 2) {
      // 滿足要求的軌道數量小于 2，報錯提示并直接 return
      console.error('非空字幕軌道數量小于 2');
      return;
    } else {
      // 滿足要求，省略后續對服務端發起合成請求的步驟
    }
  },
});