All Products
Search
Document Center

Features

Last Updated: Sep 06, 2019

Precautions

  • When the web browser console displays No 'Access-Control-Allow-Origin' header is present on the requested resource. during HTML5 video playback, see Configure CORS to fix the error.

  • When a Flash player returns an error of Canonical Name (CNAME) or cross-origin resource sharing (CORS), see Configure CORS to fix the error.

  • During video playback in the Tencent browser or WeChat on an Android mobile phone, the Tencent X5 web browser hijacks the video tag for automatic full-screen playback. For more information, see How do I enable the immersive mode for the HTML5 player in WeChat.

Continuous playback

To enable autoplay of the next video at the end of the current video, you can configure the consecutive playback feature based on the player type and the address format of the video to be played.

Direct addressing

The behaviors of HTML5 and Flash are the same. You only need to subscribe to ‘ended’ and call the loadByUrl method in the ended event, with the parameter set to the address of the next video.

  1. function endedHandle()
  2. {
  3. var newUrl = "";
  4. player.loadByUrl(newUrl);
  5. }
  6. player.on("ended", endedHandle);

VID and playAuth

  • The HTML5 player calls the replayByVidAndPlayAuth method in the ended event, and the parameters are VID and the latest playAuth. The sample code is as follows:
  1. function endedHandle()
  2. {
  3. var newPlayAuth = "";
  4. player.replayByVidAndPlayAuth(vid,newPlayAuth);
  5. }
  6. player.on("ended", endedHandle);
  • Flash does not provide the VID and playAuth switching method. The existing player must be released so that you can create a new one. The sample code is as follows:
  1. function endedHandle()
  2. {
  3. var newPlayAuth = "";
  4. player.dispose(); // Release the existing player.
  5. $('#J_prismPlayer').empty();// The ID is the container ID of the player specified in HTML.
  6. // Create a new player.
  7. player = new Aliplayer({
  8. id: 'J_prismPlayer',
  9. autoplay: true,
  10. playsinline:true,
  11. vid: vid,
  12. playauth:newPlayAuth,
  13. useFlashPrism:true
  14. });
  15. }
  16. }
  17. player.on("ended", endedHandle);

Note: The playAuth is valid for 100s. When you call the replayByVidAndPlayAuth method, you need to obtain the playAuth again.

Different address protocols

A new player must be created if the original video is MP4 and the new address is an HTTP Live Streaming (HLS) video address. The sample code is as follows:

  1. function endedHandle()
  2. {
  3. var newUrl = ""; // Specify the new streaming URL.
  4. player.dispose(); // Release the existing player.
  5. // Create a new player.
  6. setTimeout(function(){
  7. player = new Aliplayer({
  8. id: 'J_prismPlayer',
  9. autoplay: true,
  10. playsinline:true,
  11. source:newUrl
  12. });
  13. }
  14. },1000);
  15. }
  16. player.on("ended", endedHandle);

Resolution switching

Currently, the resolution switching function is automatically enabled only during VID playback with ApsaraVideo for VOD and Media Transcoding.

By default, the player chooses the resolution for playback in an ascending order.

You can set the qualitySort attribute to list the definitions in the ascending or descending order:

  • desc: indicates descending order, that is, from higher to lower resolutions.

  • asc: indicates ascending order, that is, from lower to higher resolutions.

Note:

  • For the HTML5 player, you can set the format attribute to select the MP4 or MP3 format. The default format is MP4.

  • The player remembers the currently selected resolution in resolution switching. The player plays a video in the previously selected resolution. If no resolution is selected previously, the player plays a video in the lowest resolution by default.

  • If the player does not support the selected resolution, the player automatically switches to the next lower resolution and displays a message. This feature is only supported by the HTML5 player.

Snapshot capture

ApsaraVideo Player V2.1.0 and later support snapshot capture during playback. The player returns Base64-encoded and binary image data of the image/jpeg type along with the time point of the snapshot.

Enable snapshot for a Flash player

Set snapshot to true to enable the snapshot capture function for a Flash player. RTMP streams do not support the snapshot capture function.

Enable snapshot for the HTML5 player

Add snapshot UI to the skinLayout array.

  1. skinLayout:[
  2. {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
  3. {
  4. name: "H5Loading", align: "cc"
  5. },
  6. {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
  7. {name: "infoDisplay"},
  8. {name:"tooltip", align:"blabs",x: 0, y: 56},
  9. {name: "thumbnail"},
  10. {
  11. name: "controlBar", align: "blabs", x: 0, y: 0,
  12. children: [
  13. {name: "progress", align: "blabs", x: 0, y: 44},
  14. {name: "playButton", align: "tl", x: 15, y: 12},
  15. {name: "timeDisplay", align: "tl", x: 10, y: 7},
  16. {name: "fullScreenButton", align: "tr", x: 10, y: 12},
  17. {name:"subtitle", align:"tr",x:15, y:12},
  18. {name:"setting", align:"tr",x:15, y:12},
  19. {name: "volume", align: "tr", x: 15, y: 10},
  20. {name: "snapshot", align: "tr", x: 5, y: 12},
  21. ]
  22. }
  23. ]

To enable the snapshot capture function for the HTML5 player, you need to configure videos to allow anonymous CORS.

  1. extraInfo:{
  2. crossOrigin:"anonymous"
  3. }

Snapshot capture is not supported by HTML5 playback of FLV videos in Safari. The snapshot button does not appear even if you enable the snapshot capture function.

Set snapshot size and quality

You can set the snapshot size and quality by using setSanpshotProperties(width,height,rate). The default size is 100%.

  1. player.setSanpshotProperties(300,200,0.9)

Subscribe to the snapshoted event

After a snapshot is taken, a snapshoted event is triggered and the following snapshot data is returned:

  • time: the video time point of the snapshot.

  • base64: the Base64-encoded string of the snapshot. It can be directly used to display the snapshot.

  • binary: the binary data of the snapshot. It can be used to upload the snapshot.

  1. player.on("snapshoted", function(data) {
  2. console.log(data.paramData.time);
  3. console.log(data.paramData.base64);
  4. console.log(data.paramData.binary);
  5. });

Add a header for enabling CORS for the HTML5 player

Canvas is the element that enables the snapshot capture function for the HTML5 player. You need to add a header for enabling CORS to the playback domain name. For more information, see Configure CORS.

Text watermarks on snapshots taken by the HTML5 player

You can set the following snapshotWatermark attributes to enable the text watermark function for snapshots taken by the HTML5 player:

Attribute Description
left The distance to the left side.
top The height of the upper-left corner, including the height of text.
text The text in the watermark.
font The text format. You can set multiple font attributes together by separating every two of them with a space. For example,
font-style font-weight font-size font-family.
strokeColor The brushwork color.
fillColor The padding color.
  1. snapshotWatermark:{
  2. left:"100",
  3. top:"100",
  4. text:"test watermark",
  5. font:"italic bold 48px Song typeface",
  6. strokeColor:"red"
  7. fillColor:'green'
  8. }

HTML5 player live streaming time shifting

Activate live streaming time shifting

  • You need to activate the time shifting function in ApsaraVideo for Live. For more information, see Time shifting.

  • You need to set the following attributes to enable time shifting in a player:

Attribute Description
isLive Set the parameter to true.
liveTimeShiftUrl Indicates the URL for querying the time shifting information. For more information, see Live streaming time shifting.
liveStartTime Indicates the start time of live streaming.
liveOverTime Indicates the end time of live streaming.
liveShiftSource Indicates the HLS address of the time shifting. The parameter is required only by FLV-type video sources.

Time shifting UI

The UI of live streaming time shifting mainly consists of a progress bar to display time in the area that supports time shifting.

The time area displays the current playback time, live streaming end time, and current live-stream time from left to right.

Change the end time of live streaming

You can call the liveShiftSerivce.setLiveTimeRange method to change the live streaming start and end time during the playback. The UI will change accordingly:

  1. player.liveShiftSerivce.setLiveTimeRange("",'2018/01/04 20:00:00')

FLV for live streaming and HLS for time shifting

In consideration of delay, we recommend you use FLV playback for live streaming and HLS playback for time shifting. ApsaraVideo Player supports this mode. You need to set the source attribute to specify the address for FLV playback and the liveShiftSource attribute to specify the HLS address.

  1. {
  2. source:'http://localhost/live/test.flv',
  3. liveShiftSource:'http://localhost/live/test.m3u8',
  4. }

In addition, you need to register a callback for recreatePlayer so that a new player can be created when the playback switches to FLV live streaming.

  1. var player = "";
  2. var create = function(){
  3. player = new Aliplayer({
  4. source:'http://localhost/live/test.flv',
  5. liveShiftSource:'http://localhost/live/test.m3u8',
  6. recreatePlayer:function(){
  7. create();
  8. },
  9. .....
  10. },
  11. function(player){
  12. console.log('The player is created');
  13. });
  14. }

Rotation and mirroring

Attributes and method description

  • The videoHeight and videoWidth attributes are used to set the height and width of a video. Typically, the height and width of a video are smaller than those of the container. This prevents video overflow from the parent container during rotation and mirroring.
  1. width: '100%', // The width of the container.
  2. height: '100%', // The height of the container.
  3. videoHeight:"200px", // The height of the video.

The following figure shows the effect.

  • Method description
  1. setRotate: sets the rotation angle. A positive value indicates clockwise rotation, whereas a negative value indicates anticlockwise rotation, for example, setRotate(90).

  2. getRotate: obtains the rotation angle.

  3. setImage: sets mirroring type. Optional values are horizon and vertical.

Browser adaptability

ApsaraVideo Player SDK is adaptive to PC- and iOS-based web browsers, and Google Chrome and Firefox based on Android. It is not supported by WeChat and many other web browsers based on Android. These web browsers play videos by default players due to playback hijacking.

Multi-resolution streams

  • The source parameter specifies URLs of multi-resolution streams in a JSON structure, for example:
  1. source:'{"HD":"http://common.qupai.me/player/qupai.mp4","SD":"http://common.qupai.me/player/qupai.mp4"}'
  • The text values corresponding to key values are as follows:
  1. "OD": "Original quality"
  2. "FD": "Low definition"
  3. "LD": "Standard definition"
  4. "SD": "High definition"
  5. "HD": "Ultra high definition"
  6. "2K" : "2K"
  7. "4K" : "4K"

If the key value is none of the predefined values, it is displayed as the text value on the UI.

Configure other features

Customize skin

Configure the skinLayout attribute

Configure CORS

How do I enable the immersive mode for the HTML5 player?

Resume live streaming after an error occurred

Usage of the diagnostic tool

Customize the error UI for the HTML5 player

How do I customize components?

How do I enable playback delay?