This topic describes the parameters, methods, and events for ApsaraVideo Player SDK for Web and provides sample code of API operations used in ApsaraVideo Player SDK for Web.
Parameters
If errors occur when you use ApsaraVideo Player SDK for Web, troubleshoot the errors by following the instructions provided in FAQ about ApsaraVideo Player for Web or Troubleshoot playback errors.
Parameter | Type | Description |
id | String | The ID of the DOM element for the external container of the player. |
source | String | The video playback URL. Note
|
vid | String | The media ID for media transcoding. |
playauth | String | The video playback credential. For more information, see GetVideoPlayAuth. |
preventRecord | Boolean | Specifies whether to enable the download protection feature for encrypted video streams. |
playConfig | JSON | The custom parameter that you can specify for VidAuth or VidSts-based playback. This parameter is passed to the ApsaraVideo VOD API. For more information about the supported fields, see PlayConfig: specifies the custom configurations for media playback. Sample code:
|
authTimeout | Number | The validity period of the playback URL obtained when the video is played by using VidAuth or VidSts. Unit: seconds. Default value: 7200. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete. |
height | String | The height of the player. Valid values:
Note The size of the Flash player in Google Chrome cannot be smaller than 397 × 297 pixels. |
width | String | The width of the player. Valid values:
Note The size of the Flash player in Google Chrome cannot be smaller than 397 × 297 pixels. |
autoSize | Boolean | String | Specifies whether to use the automatic scaling feature by configuring the height and width parameter. For example, if you configure width: '500px', autoSize: 'height', the width of your video is 500 pixels and the height of the video is scaled based on the aspect ratio of the source video. If you configure height: '500px', autoSize: 'width', the height of your video is 500 pixels and the width of the video is scaled based on the aspect ratio of the source video. Note that if you configure autoSize: true, the system scales the video height based on the aspect ratio of the source video. |
videoWidth | String | The width of the video. This parameter is supported only for the HTML5 player. For more information, see Specify the display mode. |
videoHeight | String | The height of the video. This parameter is supported only for the HTML5 player. For more information, see Specify the display mode. |
preload | Boolean | Specifies whether to enable automatic loading for the player. This parameter is supported only for the HTML5 player. |
cover | String | The default thumbnail of the player. Enter a valid image URL. This parameter takes effect only when autoplay is set to false. For the Flash player, you must also enable the cross-origin resource sharing (CORS) feature for this parameter to take effect. |
isLive | Boolean | Specifies whether the playback is live streaming. If the playback is live streaming, you are not allowed to drag the progress bar. Default value: false. You must set this parameter to true for live streaming. |
autoplay | Boolean | Specifies whether to enable autoplay. This parameter does not take effect for mobile devices. Valid values:
Note Autoplay may fail on specific browsers when you use ApsaraVideo Player SDK for Web. For more information, see Advanced features. |
autoplayPolicy | Object | Specifies whether to enable adaptive mute autoplay. This parameter takes effect only when you set
Note
|
rePlay | Boolean | Specifies whether to enable automatic loop playback. |
useH5Prism | Boolean | Specifies that the HTML5 player is used. |
useFlashPrism | Boolean | Specifies that the Flash player is used. |
playsinline | Boolean | Specifies whether videos are played inline in the HTML5 player. This parameter does not take effect for specific browsers for Android. |
skinRes | Url | The player skin image. We recommend that you do not change the value of this parameter unless it is necessary. For more information about how to change the player skin image, see Configure the player skin. |
skinLayout | Array | Boolean | The layout of the components. If you do not set this parameter, the default layout is used for components. false indicates that all feature components are hidden. For more information, see Configure skinLayout. |
skinLayoutIgnore | Array | The UI component that you want to hide. For more information about components, see Property description. Sample code:
Note The skinLayoutIgnore configuration takes precedence over the skinLayout configuration. |
controlBarVisibility | String | Specifies how to display the control bar. Valid values:
|
showBarTime | Number | The length of time during which the control bar is automatically hidden, in milliseconds. |
extraInfo | String | The custom parameter. The value is a JSON string. This parameter is supported only for the Flash player. Valid values:
|
enableSystemMenu | Boolean | Specifies whether to display the shortcut menu upon a right click. The default value is false. |
format | String | The streaming URL format. Valid values:
By default, this parameter is left empty. If you specify a value for this parameter, it takes effect only for the HTML5 player. |
mediaType | String | The media type of the returned content. This parameter is supported only by VID-based playback. The default value is video. Valid values:
|
qualitySort | String | The sorting method. This parameter is supported only for playback based on VID and PlayAuth. Valid values:
The default value is asc. This parameter is supported only by HTML5 players. |
definition | String | The resolution of the video. Separate different resolutions with commas (,), such as 'FD,LD'. The value is a subset of resolutions supported for the video specified by VID. This parameter is supported only for the HTML5 player. Valid values:
|
defaultDefinition | String | The default video resolution. The value is the resolution of the video specified by VID. This parameter is supported only for the HTML5 player. Valid values:
|
autoPlayDelay | Number | The playback delay, in seconds. For more information, see Configure the playback delay. |
autoPlayDelayDisplayText | String | The text that notifies users of the playback delay. For more information, see Configure the playback delay. |
language | String | The language that is used by the player. The default value is zh-cn. If this parameter is left empty, the language of the browser is used. Valid values:
|
languageTexts | JSON | The custom language text in JSON format. The value is a key:value pair, such as {jp:{Play:"Play"}}. For more information, see JSON format. |
snapshot | Boolean | Specifies whether to enable the snapshot feature for the Flash player. Valid values:
|
snapshotWatermark | Object | The snapshot watermark in HTML5. |
useHlsPluginForSafari | Boolean | Specifies whether to enable the HLS plug-in for playback in Safari. This parameter is not supported for Safari 11. Valid values:
|
enableStashBufferForFlv | Boolean | Specifies whether to enable buffering when FLV videos are played in the HTML5 player. This parameter takes effect only for live streaming. Valid values:
|
stashInitialSizeForFlv | Number | The initial cache size for FLV playback in HTML5. This parameter takes effect only for live streaming. Default value: 32. Unit: KB. If you specify a small buffer size, the live stream can be loaded and played within a short period of time. However, stuttering may quickly occur if the value is too small. |
loadDataTimeout | Number | The buffer duration that is required to display a message prompting users to switch to a lower resolution. The unit is seconds. Default value: 20. |
waitingTimeout | Number | The maximum buffer duration, in seconds. After the specified duration, an error message appears. The default value is 60. |
diagnosisButtonVisible | Boolean | Specifies whether to display the diagnosis button. Valid values:
|
disableSeek | Boolean | Specifies whether to disable the seeking feature. Valid values:
|
encryptType | Number | Specifies whether to play videos encrypted by using Alibaba Cloud proprietary cryptography. Default value: 0. Valid values:
Note
|
progressMarkers | Array | The content array of the marker on the progress bar. For more information, see Mark on the progress bar. |
vodRetry | Number | The number of retries when VOD playback fails. Default value: 3. |
liveRetry | Number | The number of retries when live stream playback fails. Default value: 5. |
hlsFrameChasing | Boolean | Specifies whether to enable frame synchronization for HLS-based live streaming. Valid values:
Note This parameter is supported only for ApsaraVideo Player SDK for Web V2.21.0 or earlier. If you use ApsaraVideo Player SDK for Web V2.21.0 or later, set the |
chasingFirstParagraph | Number | The latency after which frame synchronization of phase 1 is enabled. Unit: seconds. Default value: 20. Note This parameter is supported only for ApsaraVideo Player SDK for Web V2.21.0 or earlier. If you use ApsaraVideo Player SDK for Web V2.21.0 or later, set the |
chasingSecondParagraph | Number | The latency after which frame synchronization of phase 2 is enabled. Unit: seconds. Default value: 40. Note This parameter is supported only for ApsaraVideo Player SDK for Web V2.21.0 or earlier. If you use ApsaraVideo Player SDK for Web V2.21.0 or later, set the |
chasingFirstSpeed | Number | The playback speed when frame synchronization of phase 1 is enabled. Default value: 1.1. Note This parameter is supported only for ApsaraVideo Player SDK for Web V2.21.0 or earlier. If you use ApsaraVideo Player SDK for Web V2.21.0 or later, set the |
chasingSecondSpeed | Number | The playback speed when frame synchronization of phase 2 is enabled. Default value: 1.2. Note This parameter is supported only for ApsaraVideo Player SDK for Web V2.21.0 or earlier. If you use ApsaraVideo Player SDK for Web V2.21.0 or later, set the |
hlsOption.maxLiveSyncPlaybackRate | Number | The playback speed when frame synchronization is enabled for HLS-based live streaming. Default value: 1. 1 specifies that frame synchronization is not enabled.
Note This parameter is supported only for ApsaraVideo Player SDK for Web V2.21.0 or earlier. |
flvFrameChasing | Boolean | Specifies whether to enable frame synchronization for FLV-based live streaming. Valid values:
|
keyShortCuts | Boolean | Specifies whether to enable shortcut keys. Valid values:
Note The left and right arrow keys enable fast forward and fast backward. The up and down arrow keys enable volume increase and volume decrease. The space bar enables the pause and replay of the video. |
keyFastForwardStep | Number | The time range for the fast forward and rewind operations. Unit: seconds. Default value: 10. |
rtsFallback | Boolean | Specifies whether to enable the RTS playback degradation feature. After you enable this feature, the system automatically plays the stream over a degraded protocol such as HTTP Live Streaming (HLS) or HTTP Flash Video (HTTP-FLV) when your browser does not support RTC or stream pulling over RTS fails. FLV-based playback has a higher priority because it imposes lower latency than HLS-based playback. HLS-based playback is used when your browser does not support RTC or FLV. This feature is enabled by default. To disable this feature, specify false for this parameter. |
rtsFallbackType | String | The alternative RTS URL, such as a playback URL in the HLS or FLV format. By default, this parameter is left empty. In this case, the default policy is used and the system tries to play the stream over FLV first. If your browser does not support FLV, the system plays the stream over HLS. |
rtsFallbackSource | String | We recommend that you use the default playback degradation policy. If you want to pull the stream from a specific URL, specify this parameter. |
traceId | String | The unique user identifier. You can use traceId as the public tracing point to track logs. By default, the event tracking logs are uploaded and traceId is specified for user identification. If you do not specify traceId, ApsaraVideo Player SDK for Web automatically generates a UUID and save the UUID to the browser cache. Note This parameter is supported for ApsaraVideo Player SDK for Web V2.10.0 and later. |
textTracks | Array | The WebVTT external subtitles. Sample code:
The following items describe the fields:
Note
|
ratio | Number | The fixed aspect ratio at which the player is resized. For example, if the aspect ratio of the video is 16:9 and you specify |
extLanguageTexts | Object | ApsaraVideo Player SDK has a set of built-in UI. You can specify this parameter to change the UI content. For example, HD is displayed for High Definition by default. You can change the resolution name from HD to 1080p. Sample code:
|
speedLevels | Array | The custom playback speed. key specifies the speed and text specifies the UI content. If you leave this parameter empty, the default settings are used. Sample code:
|
logo | Array | The custom logo image. Sample code:
The following items describe the fields:
|
license | Object | To use value-added features such as playback quality monitoring, single-point tracing, and H.265 and H.266 video playback, you must submit a request on Yida to apply for a license. For more information, see Playback quality monitoring, Single-point tracing, and Play H.265 and H.266 videos. After a license is issued, integrate the license by using the following sample code:
|
mute | Boolean | Specifies whether to play videos in the mute mode. If autoplay is disabled in the browser, configure this parameter to mute autoplay. For more information, see Autoplay. |
clickPause | Boolean | Specifies whether to pause or play the video when you click on the video image. |
disablePip | Boolean | Specifies whether to hide the built-in Picture-in-Picture (PiP) button on browsers. Note
|
env | String | Specifies whether to upload the event tracking data of the player to data centers in the Chinese mainland. This is the default setting. If you have compliance requirements for data outside the Chinese mainland, configure env: 'SEA' to upload your data to the Singapore region. |
Methods
You can call methods after the ready event is complete or in the ready callback for creating the player. In the HTML5 player, methods can be called in the callback function of the constructor that is used to create a player. Sample code:
For the HTML5 player, use the following sample code:
// HTML5 player var player = new Aliplayer({},function(player) { player.play(); });
For the Flash player, use the following sample code:
// Flash player player.on('ready',function(e) { player.play(); });
Method | Parameter | Description |
play | None | Plays a video. |
pause | None | Pauses a video. |
replay | None | Replays a video. |
seek | time | Seeks to the video image at a specific point in time to start the playback. Unit: seconds. |
getCurrentTime | None | Obtains the current playback time, in seconds. |
getDuration | None | Obtains the total duration of a video, in seconds. The value can be obtained only after the video is loaded or after the play event occurs. |
getVolume | None | Obtains the current volume. The return value is a real number ranging from 0 to 1. This method does not take effect on iOS devices and specific Android devices. |
setVolume | None | Obtains the volume. The value is a real number ranging from 0 to 1. This method does not take effect on iOS devices and specific Android devices. |
mute | None | Specifies whether to play videos in the mute mode. |
unMute | None | Specifies whether to unmute the video. |
loadByUrl | url(String), time(Number) | Obtains the streaming URL. You can choose whether to specify the time parameter. The unit of the time parameter is second. You can switch between video streams in the same format. The MP4, FLV, and HLS formats are supported. Switching between live RTMP streams is not supported. |
replayByVidAndPlayAuth | vid (string): video ID, playauth (string): playback credential | Only HTML5 players are supported. Switching between videos of different formats is not supported. Switching between live RTMP streams is not supported. You can call this method to switch between on-demand Digital Rights Management (DRM) streams. Syntax: |
replayByVidAndAuthInfo | This method is available only for ApsaraVideo for Media Processing (MPS) users. Specify parameters in the following sequence: vid(String), accId(String), accSecret(String), stsToken(String), authInfo(String), and domainRegion(String). | Only HTML5 players are supported. Switching between videos of different formats is not supported. Switching between RTMP live streams is not supported. |
setPlayerSize | w(String), h(String) | Sets the player sizer. Valid values:
The size of the Flash player in Google Chrome cannot be smaller than 397 × 297 pixels. |
setSpeed | speed(Number) | Sets the playback speed. Playback speeds ranging from 0.5 to 2 are supported. This method is supported only for the HTML5 player. This method may not take effect for apps on mobile devices, such as WeChat for Android. By default, the UI for playback speed control is enabled. Note How to disable playback speed control:
|
setSanpshotProperties | width(Number): width, height(Number): height, rate(Number): snapshot quality | Sets snapshot configurations. The unit of the height and width is pixel. The value of the rate parameter is a number ranging from 0 and 1. The default value is 1. For more information about video snapshots, see Video snapshots. |
fullscreenService.requestFullScreen | None | Enables the full-screen mode of the player. This method is supported only by HTML5 players. |
fullscreenService.cancelFullScreen | None | Exits the full-screen mode of a player. This method does not take effect on iOS terminals. This method is supported only by HTML5 players. |
fullscreenService.getIsFullScreen | None | Obtains the full screen status of the player. This method is supported only for the HTML5 player. |
getStatus | None | Obtains the player status. Valid values:
|
setRotate | rotate(Number): rotation angle | Sets the rotation angle. A positive value specifies a clockwise rotation and a negative value specifies an anticlockwise rotation. Example: setRotate(90). For more information, see Specify the display mode. |
getRotate | None | Obtains the rotation angle. For more information, see Specify the display mode. |
setImage | image(String): image type | Sets the mirroring mode. Valid values:
Example: setImage('horizon'). For more information, see Specify the display mode. |
dispose | None | Destroys a player. |
setCover | cover (string): thumbnail URL | Sets the thumbnail URL. |
setProgressMarkers | markers(Array): marker dataset | Sets markers. |
setPreviewTime | time(Number): preview duration | Set the preview duration, in seconds. For more information, see the Preview (URL) component on the Aliplayer website. |
getPreviewTime | None | Obtains the preview duration. |
isPreview | None | Specifies whether to enable the preview feature. |
getCurrentPDT | None | You can obtain the ProgramDateTime value in real time for HLS videos. |
setTraceId | traceId(String): public tracking point | Sets the public tracking point used to track logs. You can call Note This method is supported for ApsaraVideo Player SDK for Web V2.10.0 and later. |
setTextTracks | textTracks(Array) | Sets WebVTT external subtitles. Sample code:
Note This method is supported for ApsaraVideo Player SDK for Web V2.12.0 and later. |
setLogo | logo(Array) | Specifies a custom logo image. Sample code:
For more information about the fields, see the logo section in the Parameters table. |
Events
Player events
Event | Description |
ready | The event that is triggered when the video initialization button of the player is rendered. Initialize the player UI settings after the ready event is complete to prevent the UI from being overwritten during initialization. Note Methods provided by a player can be called only after the ready event is complete. |
play | The event that is called when a paused video is played again. |
pause | The event that is called when a video is paused. |
canplay | The event that is triggered when an audio or video file is ready for playback. This event can be triggered multiple times and is supported only for the HTML5 player. |
playing | The event that is called during playback. This event can be called multiple times. |
ended | The event that is called after the video playback is complete. |
liveStreamStop | The event that is called when live streams are interrupted. This event is triggered after the player fails to play an HLS stream for five consecutive times. This event indicates that live streams are interrupted or the video needs to be loaded again. Note If an HLS stream is interrupted or an error occurs during live streaming, the player automatically tries to reload the stream for five times. You do not need to configure a retry logic. |
onM3u8Retry | The retry event that is called when an HLS stream is interrupted. This event is called only once for each live stream interruption. |
hideBar | The event that is called to automatically hide the control bar. |
showBar | The event that is called to automatically display the control bar. |
waiting | The data caching event. |
timeupdate | The event that is called when the playback position changes. This event is supported only for the HTML5 player. You can obtain the current playback time by using the getCurrentTime method. |
snapshoted | The event that is called when a snapshot is captured. |
requestFullScreen | The event that is called to enable full-screen mode. This event is supported only for the HTML5 player. |
cancelFullScreen | The event that is called to exit full-screen mode. This event is supported only for the HTML5 player and is not called on iOS devices. |
error | The event that is called when a playback error occurs. |
startSeek | The event that is triggered when seeking starts. The return value is the position in the video where seeking starts. |
completeSeek | The event that is triggered when seeking ends. The return value is the position in the video where seeking ends. |
resolutionChange | The event that is called when the video resolution is changed during live streaming. |
seiFrame | The event that is called when Supplemental Enhancement Information (SEI) is received for HLS or FLV-based playback. |
rtsFallback | This event is triggered when a degraded protocol is used for playback. reason indicates the degradation cause and |
settingSelected | The event that is triggered when playback settings such as the speed, definition, and subtitles are changed. Note If you want to configure the playback speed by using open source plug-ins, you need to write code and recompile the project because the settings of the player and open source plug-ins are not synchronized. You can specify an event to listen to. If you want to listen for the player event
|
rtsTraceId | The event that is triggered when an RTS stream is pulled. Listen for the event to obtain the TraceId. In the
|
autoplay | This event is triggered when autoplay succeeds or fails. If |
mutedAutoplay | The event that is triggered when a video is automatically played in the mute mode. To automatically play videos in the mute mode, set |
videoUnavailable | The event that is triggered when black screen occurs during playback because the encoding format of the video is not supported. For example, this event is triggered when you play videos on a browser that does not support H.265 videos. In this case, only audio is played and the black screen occurs. |
Subscribe to events
You can subscribe to an event by using the on method of a player instance. Sample code:
var handleReady = function(e) { console.log(e); } player.on('ready',handleReady);
You can unsubscribe from an event by using the off method of a player instance. Sample code:
player.off('ready',handleReady);