视频混音注释细节添加

Author: yiyixing

video-mix/index.html

@@ -24,12 +24,7 @@
     <div class="container">
       <div class="resourceFile">
         <div>源文件：</div>
-        <video
-          src="*******************************"
-          width="570"
-          height="450"
-          controls
-        ></video>
+        <video id="resourceFile-id" width="570" height="450" controls></video>
       </div>
 
       <div class="changeFile">
@@ -64,23 +59,28 @@
       // 上传音视频文件
       const config = {
         // 需要替换成您自己的存储桶信息
-        Bucket: "******125********" /* 存储桶，必须 */,
-        Region: "**-*********" /* 存储桶所在地域，必须字段 */,
-        FileName: "demo1.mp4" /* 文件名 */,
-        MixFileName: "demo2.mp4" /* 混音视频文件名 */,
+        Bucket: "******125********", // 存储桶
+        Region: "**-*********", // 存储桶所在地域
+        FileName: "demo1.mp4", // 源文件
+        MixFileName: "demo2.mp4", // 混音文件
+        ResultName: "demo3.mp4", // 混音之后自定义文件名
       };
 
+      // 初始化原视频展示
+      const resourceFile = document.querySelector("#resourceFile-id");
+      resourceFile.src = config.FileName;
+
+      // 任务状态执行各阶段的文字展示
       const msgText = document.querySelector("#msg-text");
 
-      /**
-       * 提交一个音视频转码任务。（使用转码模版参数方式）
-       * AudioSource: 混音音频url
-       * 1. 传入资源如果为存储桶文件，需先使用cos.getObjectUrl进行处理
-       * 2. 支持网上资源url传入
-       */
+      // 提交一个音视频转码任务
       async function postTranscode() {
         msgText.innerHTML = "开始...";
 
+        /**
+         * 支持使用cos桶文件，如果文件为私有读，需要使用cos.getObjectUrl方法得到一个带有签名信息的url
+         * 如果为其他在线资源，可忽略此步骤
+         */
         const AkUrl = await cos.getObjectUrl({
           Bucket: config.Bucket,
           Region: config.Region,
@@ -93,16 +93,16 @@
         const url = `https://${host}/${key}`;
         const body = COS.util.json2xml({
           Request: {
-            // 创建任务的Tag：Transcode;是否必传：是
+            // 创建任务的Tag
             Tag: "Transcode",
-            // 待操作的文件信息;是否必传：是
+            // 待操作的文件信息
             Input: {
-              // 文件路径;是否必传：是
+              // 源文件路径
               Object: config.FileName,
             },
-            // 操作规则;是否必传：是
+            // 操作规则
             Operation: {
-              // 转码模板参数
+              // 转码参数
               Transcode: {
                 Container: {
                   Format: "mp4",
@@ -113,41 +113,42 @@
                 Audio: {
                   Codec: "aac",
                 },
+                // 混音参数
                 AudioMix: {
-                  AudioSource: AkUrl,
-                  Replace: true,
+                  AudioSource: AkUrl, // 混音文件路径
+                  Replace: true, // 是否保留被混音视频的源音频
                 },
               },
-              // 结果输出配置;是否必传：是
+              // 结果输出配置
               Output: {
-                // 存储桶的地域;是否必传：是
+                // 存储桶的地域
                 Region: config.Region,
-                // 存储结果的存储桶;是否必传：是
+                // 存储结果的存储桶
                 Bucket: config.Bucket,
-                // 输出结果的文件名;是否必传：是
-                Object: "混音完成的视频.mp4",
+                // 输出结果的文件名
+                Object: config.ResultName,
               },
             },
           },
         });
 
         const res = await cos.request({
-          Method: "POST", // 固定值，必须
-          Key: key, // 必须
-          Url: url, // 请求的url，必须
-          Body: body, // 请求体参数，必须
-          ContentType: "application/xml", // 固定值，必须
+          Method: "POST", // 固定值
+          Key: key, // 固定值
+          Url: url, // 请求的url
+          Body: body, // 请求体参数
+          ContentType: "application/xml", // 固定值
         });
 
+        // 定时查询音视频转码任务执行结果。https://cloud.tencent.com/document/product/460/84765
         if (res.statusCode === 200) {
           queryTranceTrack(res.Response.JobsDetail.JobId);
         }
       }
 
-      //定时查询音视频转码任务执行结果。https://cloud.tencent.com/document/product/460/84765
       function queryTranceTrack(jobId) {
         setTimeout(() => {
-          const key = `jobs/${jobId}`; // jobId: 需要查询的jobId;
+          const key = `jobs/${jobId}`; // 需要查询的jobId;
           const host = config.Bucket + ".ci." + config.Region + ".myqcloud.com";
           const url = `https://${host}/${key}`;
           cos.request(
@@ -156,8 +157,8 @@
               Region: config.Region,
               Method: "GET",
               Url: url,
-              Key: key /** 固定值，必须 */,
-              ContentType: "application/xml" /** 固定值，必须 */,
+              Key: key,
+              ContentType: "application/xml",
             },
             async (err, data) => {
               if (err) {