Enable In-Browser Video Playback via VideoPlayerWidget - Drive and Photo Service

This topic describes how to use VideoPlayerWidget.

1. Configure the constructor

Set the mount point and style for the iframe of the widget.

By default, the iframe is mounted to the body element. Set the mount point for the iframe as needed.

<div id="container"></div>

import { VideoPlayerWidget } from 'aliyun-pds-js-widget';

const domain_id = 'bj1'; // Your domain ID.
const token_info = {
  access_token: 'xxxxx',
  refresh_token: 'xxxxx',
  // ...
};
const fileItem = {
  file_id: 'xxxx',
  url: 'https://xxxxx',
  // ...
};

const widgetOpts = {
  widget_endpoint: `https://${domain_id}.apps.aliyunpds.com`,
  api_endpoint: `https://${domain_id}.api.aliyunpds.com`,
  // The mount point.
  container: document.querySelector('#container'),
  // The custom style.
  iframe_style: {
    width: '100%',
    height: '100%',
  },
  // The embedded page.
  module: 'video/player',
  token_info,
  // Configure the function that obtains refreshed tokens. 
  refresh_token_fun: async () => {
    // The business processing logic. Call the refreshToken operation that is encapsulated on the server. 
    // new_token_info Obtain the new token from the server.
    // let new_token_info = await fetch(.....)
    return new_token_info;
  },
  domain_id,
  drive_id: '1',    // The ID of the drive where the document is located.
  file_id: 'xxxx',  // The ID of the document.
  init_list: [fileItem], // The item list.
};

const ins = new VideoPlayerWidget(widgetOpts);

VideoPlayerWidget constructor parameters

Parameter	Type	Required	Description
module	string	Yes	The component name. Valid values: `video/player`: video playback
widget_endpoint	string	Yes	The URL that is used to access the component. In most cases, the value of this parameter is the domain name that hosts the application.
api_endpoint	string	Yes	The domain name of the backend API of PDS.
container	string or HTMLElement	Yes	The element that is used to mount the component.
lang	string		The language. Valid values: zh_CN and en_US. For the first time, the language specified by the navigator.language property in the browser is used by default.
token_info	Object	Yes	The JSON object for the access token.
share_token	string		The access token for sharing, which is required when you share resources.
refresh_token_fun	Function	Yes	The method that is used to refresh the access token when it expires. After the method is called, a new access token is returned.
refresh_share_token_fun	Function		The method that is used to refresh the access token for sharing when it expires. After the method is called, a new access token for sharing is returned.
iframe_style	Object		The custom iframe style.
iframe_attr	Object		The custom iframe attribute.
domain_id	string	Yes	The domain ID.
drive_id	string		The drive ID. You must specify one of the drive_id parameter and the share_id parameter.
share_id	string		The share ID. You must specify one of the drive_id parameter and the share_id parameter.
file_id	string	Yes	The ID of the document.
revision_id	string		The version ID of the document that has multiple versions.
init_list	Object[]	Yes	The playlist. Each item can be obtained by calling the getFile or listFiles method.
video_transcoding_service	boolean		Specifies whether to transcode the video for playback. Before you set this parameter to true, make sure that the playback switch for transcoded videos is turned on. Default value: false.

2. Configure the instance

Sample code:

const ins = new VideoPlayerWidget(widgetOpts)

// Call a method.
ins.setLang('zh_CN')

Methods supported by VideoPlayerWidget

Method	Description	Parameter description
setToken	Sets the logon state of the component.	A JSON object that contains the token information.
removeToken	Clears the logon state of the component.	N/A
setLang	Sets the language of the component.	A string that indicates the language. Replace the hyphen (-) with an underscore (_). For example, if you want to use simplified Chinese, set the value to zh_CN, which corresponds to zh-CN in browsers.
setShareToken	Sets the sharing token for the component.	string
on	Listens to events.	See below for details.
destroy	Destroys the component.	N/A
updateList	Updates the playlist.

updateList method

add: add to playlist

ins.updateList({
  type: 'rename', 
  items: [{ 
    file_id: 'xxx', 
    name: 'xxx', 
    url: '', 
    updated_at: '', 
    category: ''
    // ...
  }] 
})

rename

ins.updateList({
  type: 'rename', 
  items: [{ 
    file_id: 'xxx', 
    name: 'xxx', 
    updated_at: '', 
    category: ''
    // ...
  }] 
})

delete

ins.updateList({
  type: 'delete', 
  items: [{ 
    file_id: 'xxx'
  }] 
})

3. Listen to events

Enable event listening for the component. When a specific event occurs on the component, the corresponding callback is returned.

Sample code:

const ins = new VideoPlayerWidget(widgetOpts);

ins.on('Event name', function(data) {
  // do something...
})

Supported events

Event	Description	Payload parameter
load	The component is rendered and triggered for the first time.	N/A
error	A component error occurs.	An object that is triggered when a component error occurs. Example: {code: "TokenExpired", mesage:"xxx"}
tokenChanged	The token for the component is changed.	An object, which is `token` or `null`.
shareTokenChanged	The sharing token for the component is changed.	An object, which is `share_token` or `null`.
langChanged	The language of the component is changed.	A string that indicates the language, such as `zh_CN`.

Error codes for specific error events

TokenInvalid: The token is invalid or not specified.
TokenExpired: The token has expired.

For information about other error codes, see Error handling.