文件增值服务

参数说明

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);
  } 
};