智能生產制作提供專業在線的高級模板剪輯能力，針對視頻制作中重復性內容和定制美化需求，您可以通過自定義模板和素材替換，實現批量化視頻生產。通過閱讀本文，您可以了解如何接入高級模板剪輯Web SDK。

使用說明

本文中引入的高級模板剪輯Web SDK的版本號1.0.0僅供參考。獲取最新的版本，請參見高級模板剪輯工程——幫助信息。

操作步驟

  1. 引入高級模板剪輯Web SDK。

    在項目前端頁面文件中的<head>標簽處引入高級模板剪輯Web SDK的CSS文件，如下所示：

    <head>
  <link rel="stylesheet" >
</head>

    在<body>標簽處添加一個用以掛載剪輯界面的<div>節點，并在<body>標簽末尾添加引入Web SDK的JS文件，同時添加一個用以調用Web SDK的<script>節點。

    <body>
  <div id="aliyun-advanced-template" style="height:100vh"></div> // 您可以根據需要改變 container 高度
  <script src="https://g.alicdn.com/thor-server/advanced-template-websdk/1.0.0/index.js"></script>
  <script>
    // 調用 SDK 的代碼放在這里
  </script>
</body>
  2. 初始化高級模板剪輯Web SDK。
    window.AliyunAdvancedTemplate.init(config);

config屬性說明

參數類型必填描述引入版本
localestring否界面語言，取值：
  • zh-CN（默認值）：中文。
  • en-US：英文。
1.0.0
containerElement是Web SDK生成界面掛載的DOM節點。1.0.0
projectIdstring是高級模板剪輯工程ID。1.0.0
onBackButtonClick() => void;否左上角返回按鈕響應函數，如果不傳，則不顯示此按鈕。1.0.0
updateEditingProject(req: { ProjectId: string; Title?: string; TemplateId?: string; ClipsParam?: string }) => Promise<void>;是修改剪輯工程標題或單擊右上角保存響應函數，參數及返回值詳情請參見UpdateEditingProject。1.0.0
getEditingProject(req: { ProjectId: string }) => Promise<Response<GetEditingProjectRsp>>;是獲取剪輯工程的元信息，例如：工程標題、模板ID等信息，參數及返回值詳情請參見GetEditingProject。1.0.0
getTemplateMaterials(req: { TemplateId: string; FileList: string }) => Promise<Response<GetTemplateMaterialsRsp>>;是獲取高級模板的原始素材，參數及返回值詳情請參見GetTemplateMaterials。1.0.0
batchGetMediaInfos(req: { AdditionType: 'FileInfo'; MediaIds: string }) => Promise<Response<BatchGetMediaInfosRsp>>;是批量獲取媒資信息，參數及返回值詳情請參見BatchGetMediaInfos。1.0.0
onChangeMaterial() => Promise<MediaInfo>;是編輯組素材區更換素材功能響應函數。返回的Promise對象需要resolve被選中媒資的信息。1.0.0
onConfirmPreview(req: { ProjectTitle: string; TemplateId: string; TemplateSize: [number, number]; ClipsParam: string; }) => Promise<Response<{ MediaId: string }>>;是預覽視頻按鈕響應函數，參數依次為：模板ID、模板寬高、模板素材參數。返回的Promise對象需要resolve生成預覽視頻的 MediaId。1.0.0
submitMediaProducingJob(req: { ProjectId: string; TemplateId: string; TemplateSize: [number, number]; ClipsParam: string; }) => Promise<void>;是提交合成任務，參數依次為：工程ID、模板ID、模板寬高、模板素材參數。返回的Promise對象需要resolve。參數及返回值詳情請參見SubmitMediaProducingJob。1.0.0

init()示例代碼

重要 Web SDK只負責界面交互，不會發起請求，您需要通過Web SDK調用請求邏輯。請求本身應該先發送給您自己的服務端，您自己的服務端再根據AccessKey信息（AccessKey ID和AccessKey Secret）轉發給相關的阿里云OpenAPI。
// 注意，WebSDK 本身并不提供 request 這個方法，這里僅作為示例，您可以使用您喜歡的網絡請求庫，如 axios 等

const projectId = 'exampleId';

window.AliyunAdvancedTemplate.init({
  locale: 'zh-CN',
  container: document.getElementById('aliyun-advanced-template'),
  projectId,
  onBackButtonClick: () => {
    // 跳轉回列表頁
    window.location.href = '/mediaEdit/list/advanced';
  },
  updateEditingProject: req => {
    return request('UpdateEditingProject', req);
  },
  getEditingProject: req => {
    return request('GetEditingProject', req);
  },
  getTemplateMaterials: req => {
    return request('GetTemplateMaterials', req);
  },
  batchGetMediaInfos: req => {
    return request('BatchGetMediaInfos', req);
  },
  onChangeMaterial: () => {
    return new Promise(resolve => {
      // 假設 showMediaModal 是您編寫的一個函數，這個函數將展示一個 modal 組件，modal 中通過調用 ICE 的
      // ListMediaBasicInfos 接口展示媒資庫中的媒資供用戶進行選擇，用戶選擇后點擊確定按鈕，觸發 onOk 方法
      showMediaModal({
        onOk(media) {
          resolve(media);
        }
      });
    });
  },
  onConfirmPreview: ({ ProjectTitle, TemplateId, TemplateSize, ClipsParam }) => {
    const height = 360; // 假設按照 360P 進行預覽
    let width = Math.floor((height / TemplateSize[1]) * TemplateSize[0]); // 根據模板的比例算出寬度

    if (width % 2 === 1) width += 1; // 保證寬度是偶數

    const filename = `${encodeURIComponent(
      ProjectTitle
    )}_preview_${new Date().toISOString()}.mp4`; // 預覽視頻文件名由您自定義，這里只是一種示例

    const outputMediaConfig = JSON.stringify({
      MediaURL: `https://exampleBucket.oss-exampleRegion.aliyuncs.com/examplePath/${filename}`,
      Width: width,
      Height: height
    });

    return request('SubmitMediaProducingJob', {
      ProjectId: projectId,
      TemplateId,
      ClipsParam,
      OutputMediaConfig: outputMediaConfig
    });
  },
  submitMediaProducingJob: ({ TemplateId, TemplateSize, ClipsParam }) => {
    return new Promise((resolve, reject) => {
      // 假設 showSubmitModal 是您編寫的一個函數，這個函數將展示一個 modal 組件，modal 中提供表單供用戶填寫合成信息
      // 比如文件名、存儲路徑、格式、分辨率等，當用戶提交表單時，這些填寫的信息將被整理成 formValues 傳入 onOk 里
      showSubmitModal({
        onOk: async (formValues) => {
          const res = await request('SubmitMediaProducingJob', {
            ...formValues,
            ProjectId: projectId,
            TemplateId,
            ClipsParam
          });
          if (res.code === '200') {
            console.log('success');
            resolve();
          } else {
            console.error('failed');
            reject();
          }
        }
      });
    });
  }
});