通过代理预览实现WebSDK高清长视频剪辑

操作步骤

1. 注册高清文件至资源库。

   调用RegisterMediaInfo接口将高清视频文件注册至资源库，生成高清素材MediaID。

    request('RegisterMediaInfo', {
         InputURL: mediaUrl,// 待注册的高清媒资地址。
         MediaType: "video",
   }).then((res) => {
         setMediaId(res.data.MediaId);// 保存高清素材的MediaId，待注册低清预览视频时使用。
    })

2. 生成及关联低清预览视频。
   1. 生成低清预览视频。

      调用SubmitTranscodeJob接口对高清视频进行转码，生成低清预览视频。

      request('SubmitTranscodeJob', {
            InputGroup: JSON.stringify([{
              Type: "Media",
              Media: mediaId,// 高清素材的MediaId。
            }]),
            OutputGroup: JSON.stringify([{
              Output: {
                Type: "Media",
                Media: mediaId,// 高清素材的MediaId。
              },
              ProcessConfig: {
                Transcode: {
                  TemplateId: "S00000001-200010" // 低清视频的转码模板ID，按照业务实际需要填写。
                }
              }
            }])
       }).then((res) => {
            // 接入方业务处理逻辑。
       });

      说明

      • 如果您的高清视频分辨率超过1080P，或码率超过5000 kbps，需要进行转码，生成低清预览视频。
      • 低清预览视频分辨率建议为480P，格式为MP4，且会产生转码费用。详情请参见转码。
      • 如果您已有低清预览视频，则无需再调用接口生成，可以直接上传关联。
      • 如果您要预览低清视频，必须确保转码任务完成。
   2. 关联低清预览和高清视频。

      调用RegisterMediaStream绑定低清预览视频和高清视频mediaId。

        request('RegisterMediaStream', {
            InputURL: mediaDqUrl,// 已存在的低清媒资地址。
            MediaId: mediaId // 高清素材的MediaId。
        }).then((res) => {
           // 接入方业务处理逻辑。
       })

3. 通过WebSDK指定低清预览视频。

   将getDynamicSrc接口的mediaId参数进行透明传输，调用GetPlayInfo接口获取低清预览视频的播放地址。

   window.AliyunVideoEditor.init({
   //....
    useDynamicSrc: true, // 媒资库默认情况下播放地址会过期，所以需要动态获取。
    getDynamicSrc: (mediaId) => {
     return request('GetPlayInfo', {
             MediaId: mediaId
      }).then((res) => {
        //  以下代码主要是根据代码的清晰的优先度选择优先播放高清还是低清视频，代码仅供参考。
       /***
        清晰度
         ● FD：流畅
         ● LD：标清
         ● SD：高清
         ● HD：超清
         ● OD：原画
       */
       const DefinitionLevels = {'FD': 0, 'LD': 1, 'SD': 2, 'HD': 3, 'OD': 4};
        // 遍历播放列表，选择最流畅的视频进行预览，默认采用第一个视频作为底线。
       const PlayItem = res.data.PlayInfoList.reduce((result, item) => {
        if (!result) {
          return item;
        } else if (DefinitionLevels[item.Definition]
                   < DefinitionLevels[result.Definition]) {
          return item;
        }
        return result;
       }, null);
       // 获取播放地址。
       return PlayItem.PlayURL;
     });
   },
   })

4. 调用合成服务。

   调用SubmitMediaProducingJob提交剪辑合成作业，传入Timeline（Timeline中视频MediaId为高清视频ID）。