Drive and Photo Service:Use file-related value-added features

Request parameters

IOfficePreviewReq

Response parameters

result

Examples on how to use the online file preview feature

The online file preview feature of Drive and Photo Service is provided by Intelligent Media Management (IMM).

To use the feature, perform the following steps:

1. Modify the code in HTML.

Import the SDK for JavaScript to HTML.  
<script src="https://g.alicdn.com/IMM/office-js/1.1.15/aliyun-web-office-sdk.min.js"></script>

<!-- The iframe to be used. -->
<div id="preview-div"></div>

2. Use the sample code.

Call the getOfficePreviewUrl method to obtain the access token and preview URL.

// Obtain the access token and preview URL. 
var tokenInfo = await client.getOfficePreviewUrl({
  drive_id: '1',
  file_id: 'xxxxxx'
})
 
let instance = aliyun.config({
  mount: document.querySelector('#preview-div'),  // The iframe to be used for online file preview.
  url: tokenInfo.preview_url, // The access token and preview URL. 
  refreshToken,               // The method used to refresh an access token.
})
// Specify an access token. 
instance.setToken({
  token: tokenInfo.access_token,
  timeout: 10*60*1000     
})


// Refresh an access token.
// Call the getOfficePreviewUrl method again to obtain the access token and 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   
   }
}

Example of an iframe:

You can modify the iframe based on your business requirements.

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

Request parameters

IOfficeEditReq

Response parameters

IOfficeEditRes

Request parameters

IOfficeRefreshReq

Response parameters

Request parameters

IGetVideoPreviewPlayMetaReq

Response parameters

IGetVideoPreviewPlayMetaRes

IVideoPreviewPlayMeta

ILiveTranscodingTask

Examples

1. Query the definitions that are supported after transcoding

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

Examples of returned definitions:

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

The following table lists the parameter values of various transcoding templates. The parameter values of a video that is transcoded by using a transcoding template do not exceed the parameter values of the transcoding template.

2. Troubleshoot errors

If a transcoding job is in progress, HTTP status code 202 is returned. In this case, call the getVideoPreviewPlayMeta method multiple times until the value of the status parameter returned for the transcoding job in the live_transcoding_task_list parameter is finished. The following sample code provides an example on the returned error information in the JSON format:

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

If the transcoding feature is disabled, HTTP status code 400 is returned. The following sample code provides an example on the returned error information:

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

Request parameters

IVideoPreviewPlayInfoReq

Response parameters

IVideoPreviewUrlRes

Examples

1. Obtain the URL that is used to play a video in a definition after transcoding

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

Sample success response:

{
  "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"   // The URL.
      }
    ]
  }
}

2. Troubleshoot errors

If a transcoding job is in progress, HTTP status code 202 is returned. In this case, call the getVideoUrlFromDefinition method multiple times until the value of the status parameter returned for the transcoding job in the live_transcoding_task_list parameter is finished. The following sample code provides an example on the returned error information in the JSON format:

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

If the transcoding feature is disabled, HTTP status code 400 is returned. The following sample code provides an example on the returned error information:

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

If no transcoding information is available, the specified template_id parameter may be invalid.

{
    "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. Play a transcoded video

In most cases, a transcoded video is in the M3U8 format and can be played by using open source video players. We recommend that you use Video.js.

The following sample code provides an example on how to play a transcoded video by using Video.js based on 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', // The state of the video. You can perform operations based on the video status.
      // The configuration items of Video.js.
      playerOptions: {
        controls: false, // Specifies whether to use a control bar.
        autoplay: true, // Specifies whether to enable autoplay.
        muted: false, // Specifies whether to mute the player.
        html5: {
          vhs: {
            // The player supports the playback of M3U8 videos.
            withCredentials: false,
          },
        },
      },
    };
  },
  mounted() {
    this.init();
    this.getVideoUrlFromDefinition();
  },
  method: {
    init() {
      // Add the Authorization header to handle errors with HTTP status code 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---Start to load the video.---')
          this.status = 'loading';
          // Handle the error if the loading duration exceeds 15 seconds.
          if (!this.waitingTimer) {
            let second = 0;
            this.waitingTimer = setInterval(() => {
              second++;
              if (second > 15) {
                this.status = 'transcoding';
              }
            }, 1000);
          }
        });
        this.on('seeked', () => {
          // console.log('seeked---The video is loaded.---')
          this.status = 'normal';
          this.waitingTimer = null;
          clearInterval(this.waitingTimer);
        });
      });
    },
    async getVideoUrlFromDefinition() {
      try {
        // Obtain the template information.
        const { video_preview_play_info } = await client.getVideoUrlFromDefinition({
          drive_id: this.drive_id,
          file_id: this.file_id,
          template_id: '',
          get_without_url: true,
        });
        // Obtain the template information of the transcoded video.
        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) {
          // Obtain the information about the transcoded video.
          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
          ) {
            // Obtain the 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();
        // Modify the URL.
        this.player.src({
          src: value,
          type: 'application/x-mpegURL',
        });
        this.player.load();
        this.player.play();
      }
    },
  },
  beforeDestroy() {
    this.waitingTimer && clearInterval(this.waitingTimer);
  },
};
</script>

Request parameters

IArchiveFileReq

Response parameters

Request parameters

IArchiveFileReq

Response parameters

const downloadArchiveFiles = async () => {
  const archiveName = "download.zip";
  try {
    const params = {
      drive_id: "xxxxx",
      files: ["xxxxx", "xxxx"],
      name: archiveName,
    };
    // The pollingArchiveFiles method returns only Failed or Succeed as the packaging progress. If the packaging progress is Running, the method automatically polls the packaging progress until Failed or Succeed is returned.
    const { state, url, message } = await client.pollingArchiveFiles(params);
    if (state === "Failed") {
      throw Error("Failed to archive files, cause: ", message);
    } else {
      // Download the package.
      const link = document.createElement("a");
      link.href = url;
      link.download = archiveName;
      link.click();
    }
  } catch (err) {
    console.log(err);
  } 
};