Drive and Photo Service：檔案增值服務

參數說明

IOfficePreviewReq

傳回值

result

附： 文檔預覽方法舉例

PDS文檔的預覽對接的是阿里雲IMM的文檔預覽功能。

下面是具體步驟：

(1) html 修改

在 html 首先需要引入 sdk.js。 
<script src="https://g.alicdn.com/IMM/office-js/1.1.15/aliyun-web-office-sdk.min.js"></script>

<!-- iframe mounted 元素 -->
<div id="preview-div"></div>

(2) 主要邏輯

調用 getOfficePreviewUrl 介面擷取 access_token 和 preview_url。

//擷取協作地址和AccessToken。
var tokenInfo = await client.getOfficePreviewUrl({
  drive_id: '1',
  file_id: 'xxxxxx'
})
 
let instance = aliyun.config({
  mount: document.querySelector('#preview-div'),  // 預覽的 iframe 會渲染在這個元素裡
  url: tokenInfo.preview_url, // 設定文檔協作URL地址。
  refreshToken,               // 配置重新整理token方法
})
//設定AccessToken。
instance.setToken({
  token: tokenInfo.access_token,
  timeout: 10*60*1000     
})


// 重新整理token 方法
// 重新調用 getOfficePreviewUrl 介面可以再次擷取  access_token 和 preview_url
async function refreshToken(){
   var tokenInfo = await client.getOfficePreviewUrl({
      drive_id: '1',
      file_id: 'xxxxxx'
   })
   return {
      token: tokenInfo.access_token,
      timeout: 10*60*1000   
   }
}

(3) iframe 樣式

根據實際情況自行調整。

#preview-div iframe{
  width: 100%;
  height: 100%;
}

參數說明

IOfficeEditReq

傳回值

IOfficeEditRes

參數說明

IOfficeRefreshReq

傳回值

參數說明

IGetVideoPreviewPlayMetaReq

傳回值

IGetVideoPreviewPlayMetaRes

IVideoPreviewPlayMeta

ILiveTranscodingTask

舉例：

(1) 擷取轉碼後支援的各種清晰度

const previewInfo = await client.getVideoPreviewPlayMeta({
  drive_id: "xxx",
  file_id: "xxx",
  category: "live_transcoding",
});

const definitions = previewInfo?.video_preview_play_meta?.live_transcoding_task_list?.map(n=>{
   return {
     template_id: n.template_id,
     template_name: n.template_name
   }
})

definitions 格式如：

[
  {
    template_id: "264_480p",
    template_name: "pdsSD"
  },
  {
    template_id: "264_720p",
    template_name: "pdsHD"
  }
]

附錄：轉碼後的視頻各參數均不會超過轉碼模板的對應值

(2) 異常情況

如果沒有轉碼完成（正在轉碼），返回 status code 為 202，會返回以下格式json：（這個時候需要輪詢 getVideoPreviewPlayMeta 方法，直到 live_transcoding_task_list 中的狀態為finished）

{
  code: "VideoPreviewWaitAndRetry",
  message: "video is transcoding, please wait and retry. offline transcode when play, wait transcoding",
};

轉碼增值服務開關沒有開啟, 返回 status code: 400：

{
  code: "VideoPreviewDisabled.OnlineVideoTranscode",
  message: "video preview online_video_transcode is disabled",
};

參數說明

IVideoPreviewPlayInfoReq

傳回值

IVideoPreviewUrlRes

舉例：

(1) 擷取轉碼後某個清晰度的URL

const previewInfo = await client.getVideoPreviewPlayInfo({
  drive_id: "xxx",
  file_id: "xxx",
  category: "live_transcoding",
  template_id: "264_480p",
});

正常返回：

{
  "domain_id": "xxx",
  "drive_id": "xxxx",
  "file_id": "xxxx",
  "video_preview_play_info": {
    "category": "live_transcoding",
    "meta": {
      "duration": 2.484688,
      "width": 1280,
      "height": 720,
      "live_transcoding_meta": {
        "ts_segment": 10,
        "ts_total_count": 1
      }
    },
    "live_transcoding_task_list": [
      {
        "template_id": "264_480p",
        "template_name": "pdsSD",
        "status": "finished",
        "stage": "stage_all",
        "url": "https://xxxxxf1ec8c36"   // 播放url
      }
    ]
  }
}

(2) 異常情況

如果沒有轉碼完成（正在轉碼），返回 status code 為 202，會返回以下格式json：（這個時候需要輪詢 getVideoUrlFromDefinition 方法，直到 live_transcoding_task_list 中的狀態為finished）

{
  code: "VideoPreviewWaitAndRetry",
  message: "video is transcoding, please wait and retry. offline transcode when play, wait transcoding",
};

轉碼增值服務開關沒有開啟, 返回 status code: 400：

{
  code: "VideoPreviewDisabled.OnlineVideoTranscode",
  message: "video preview online_video_transcode is disabled",
};

沒有對應的轉碼資訊（一般是template_id傳錯了）

{
    "domain_id": "x x x",
    "drive_id": "xxxx",
    "file_id": "61c5729c722d8f86d9c848508b8c5f6dc6604248",
    "video_preview_play_info": {
        "category": "live_transcoding",
        "meta": {
            "duration": 14.433333,
            "width": 960,
            "height": 544,
            "live_transcoding_meta": {
                "ts_segment": 10,
                "ts_total_count": 2
            }
        }
    }
}

(3) 轉碼後的視頻如何播放

轉碼後的視頻一般為.m3u8格式，可以用一些開源的視頻播放器播放，推薦使用videojs。

下面是個基於Vue封裝的例子：

<template>
  <video class="video-js" ref="videoPlayer"></video>
</template>
<script> 
import videojs from 'video.js';
import { getToken } from 'token.js';
import client from 'client.js'
  
export default {
  data() {
    return {
      drive_id: '1',
      file_id: '612cxxxxxxxxxxxxxxxxxxxxxxxxxxxec7d',
      url: '',
      status: 'loading', // 視頻狀態，可根據狀態進行其他動作
      // video.js配置項
      playerOptions: {
        controls: false, // 是否擁有控制條
        autoplay: true, // 是否自動播放
        muted: false, // 是否靜音
        html5: {
          vhs: {
            // 支援m3u8視頻播放
            withCredentials: false,
          },
        },
      },
    };
  },
  mounted() {
    this.init();
    this.getVideoUrlFromDefinition();
  },
  method: {
    init() {
      //headers中添加Authorization，處理401報錯
      videojs.Vhs.xhr.beforeRequest = function (options) {
        const { access_token } = getToken() 
        options.headers = { Authorization: `Bearer ${access_token}` };
        return options;
      };
      this.player = videojs(this.$refs.videoPlayer, this.playerOptions, function () {
        this.on('seeking', () => {
          // console.log('seeking---視頻跳轉中---')
          this.status = 'loading';
          // 跳轉載入逾時15s,進行處理
          if (!this.waitingTimer) {
            let second = 0;
            this.waitingTimer = setInterval(() => {
              second++;
              if (second > 15) {
                this.status = 'transcoding';
              }
            }, 1000);
          }
        });
        this.on('seeked', () => {
          // console.log('seeked---視頻跳轉結束---')
          this.status = 'normal';
          this.waitingTimer = null;
          clearInterval(this.waitingTimer);
        });
      });
    },
    async getVideoUrlFromDefinition() {
      try {
        // 第一步拉模數板
        const { video_preview_play_info } = await client.getVideoUrlFromDefinition({
          drive_id: this.drive_id,
          file_id: this.file_id,
          template_id: '',
          get_without_url: true,
        });
        // 取轉碼成功的模板
        const live_transcoding_task_list =
          video_preview_play_info.live_transcoding_task_list.filter((item) => {
            return item.status === 'finished';
          });
        if (live_transcoding_task_list.length) {
          // 第二步擷取url
          const videoInfo = await client.getVideoUrlFromDefinition({
            drive_id: this.drive_id,
            file_id: this.file_id, 
            template_id: live_transcoding_task_list[0].template_id,
            url_expire_sec: 3600,
          });
          if (
            videoInfo.video_preview_play_info.live_transcoding_task_list.length &&
            videoInfo.video_preview_play_info.live_transcoding_task_list[0].url
          ) {
            // 第三步擷取url
            this.url = videoInfo.video_preview_play_info.live_transcoding_task_list[0].url;
          }
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
  watch: {
    url(value) {
      if (value) {
        this.player.pause();
        // 修改url
        this.player.src({
          src: value,
          type: 'application/x-mpegURL',
        });
        this.player.load();
        this.player.play();
      }
    },
  },
  beforeDestroy() {
    this.waitingTimer && clearInterval(this.waitingTimer);
  },
};
</script>

參數說明

IArchiveFileReq

傳回值

參數說明

IArchiveFileReq

返回

const downloadArchiveFiles = async () => {
  const archiveName = "download.zip";
  try {
    const params = {
      drive_id: "xxxxx",
      files: ["xxxxx", "xxxx"],
      name: archiveName,
    };
    // pollingArchiveFiles 只會返回 Failed 或者 Succeed，對於Running狀態會自動輪詢
    const { state, url, message } = await client.pollingArchiveFiles(params);
    if (state === "Failed") {
      throw Error("Failed to archive files, cause: ", message);
    } else {
      // 下載壓縮檔
      const link = document.createElement("a");
      link.href = url;
      link.download = archiveName;
      link.click();
    }
  } catch (err) {
    console.log(err);
  } 
};