All Products
Search
Document Center

Integration

Last Updated: Sep 17, 2019

Supported players

ApsaraVideo Player SDK for web supports playback in Flash and HTML5.

  • Flash player:

    • Video formats: MP4, FLV, M3U8, and RTMP

    • Video coding format: H.264

    • Audio coding formats: AAC and MP3

    • Audio format: MP3

Flash players support encrypted playback. For more information about encrypted VOD playback, see VOD encryption. For more information about playback based on ApsaraVideo for Media Processing, see Playback based on ApsaraVideo for Media Processing.

  • HTML5 player:

    • Video formats: MP4, M3U8, and FLV

    • Video coding format: H.264

    • Audio coding format: AAC

    • Audio format: MP3

Adaptability

  • Flash player
MP4 FLV M3U8 RTMP MP3
iOS × × × × ×
Android × × × × ×
Google Chrome
Firefox
Internet Explorer Internet Explorer 8 and later Internet Explorer 8 and later Internet Explorer 8 and later Internet Explorer 8 and later Internet Explorer 8 and later
Microsoft Edge
Opera
Safari

Flash players are not supported by mobile platforms.

To use a Flash player in Internet Explorer 8, you need to include the link to the json.min.js reference in Internet Explorer 8.

  1. https://g.alicdn.com/de/prismplayer/2.8.2/json/json.min.js
  • HTML5 player
MP4 FLV M3U8 RTMP MP3
iOS × ×
Android × V4.0 and later ×
Google Chrome Google Chrome 34 and later Google Chrome 34 and later ×
Firefox Firefox 42 and later Firefox 42 and later ×
Internet Explorer Internet Explorer 9 and later Internet Explorer 11 and later for Windows 8.1 and later
Internet Explorer 11 and later for Windows 8.1 and later
× Internet Explorer 9 and later
Microsoft Edge ×
Opera ×
Safari Safari 8 and later Safari 8 and later ×

HTML5 players do not support FLV and RTMP videos on mobile platforms.

Cross-origin resource sharing (CORS) needs to be enabled for PC-based browsers to play FLV and M3U8 videos.

The Native HLS Playback Chrome plug-in must be installed to play M3U8 videos in PC-based Google Chrome web browser on mobile simulators.

  • Alibaba Cloud Encryption-based HTML5 playback
Http-Live-Streaming (HLS) iOS Android PC
HLS Encryption Google Chrome
FireFox
Safari
Microsoft Edge
Internet Explorer 11 and later for Windows 8.1 and later
Alibaba Cloud Encryption × Chrome for Android Google Chrome
FireFox
Safari
Microsoft Edge
Internet Explorer 11 and later for Windows 8.1 and later

For more information about encrypted VOD playback, see VOD encryption. For more information about playback based on ApsaraVideo for Media Processing, see Playback based on ApsaraVideo for Media Processing.

  • Enable anti-debugging for Alibaba Cloud Encryption

Import the aliplayer-vod-anti-min.js file to enable anti-debugging. Considering the debugging during development, you can import the JavaScript file to a published product. You can access the file through the following address:

  1. <script src="https://g.alicdn.com/de/prismplayer/2.8.2/hls/aliplayer-vod-anti-min.js"></script>

Note: If you cannot access the website after closing the development tool page, you need to open the website in a new tab.

HTML5 adaptability

  • By default, mobile-based web browsers play videos in full-screen mode.

    1. By default, mobile-based web browsers play videos in full-screen mode. The setting varies depending on different situations:<br /> **iOS application:**To enable inline playback in an iOS application, you need to set the playsinline attribute of ApsaraVideo Player to true and set allowsInlineMediaPlayback for WebView. In this way, videos are played in the application in inline mode.<br />**Safari:**Automatic video playback in full-screen mode cannot be disabled in Safari on iOS earlier than 10.<br />**Android:**Different custom versions of the Android system have varying implementation methods of the HTML5 video label, resulting in much lower video playback consistency in Android than iOS. You can also set the playsinline attribute to true. As long as web browsers support inline playback, you can enable the immersive mode in X5-kernel web browsers (such as the Tencent browser and WeChat) to achieve an effect similar to inline playback.
  • The setting of autoplay to true is invalid on mobile platforms, and autoplay fails.

    1. **Mobile web browser:** To enable autoplay in an HTML5 player, you can only set the autoplay attribute or call the play() method. However, autoplay is disabled on mobile platforms. A common solution is to trigger playback manually, for example, by listening to the user clicking event and calling the play() method. Certain web browsers and WebView-based applications, especially those on Android, may allow autoplay.<br /> **Safari:** Autoplay is not supported by web browsers later than MacOS High Sierra Safari 11.<br /> **Google Chrome:** Autoplay is not supported by web browsers later than Google Chrome 55.
  • The volume adjustment methods (getVolume and setVolume) are ineffective in iOS applications and some Android applications.

  • The playback speed control function is ineffective when the speed control setting is not supported by some mobile web browsers, such as Android-based WeChat.

  • Some mobile phones, for example, Android 4.4.1-based mobile phones, do not support snapshot due to security reasons, or get black snapshots due to browser problems. You can use the Snapshot testing tool to verify whether the browser supports snapshot.

How do I import the .js file?

You can initialize a player only by referencing the following .js file on the page, without any dependency on the frontend .js library. If gibberish text occurs, you can add a script reference label to add the charset attribute and set it to “utf-8”, for example, charset=”utf-8”:

  1. https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js

The preceding .js file contains the cross-terminal adaptation logic for Flash and HTML5. If you want to use either Flash or HTML5, you can reference the corresponding .js file to reduce the file size:

Flash version:

  1. https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-flash-min.js

HTML5 version:

  1. https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js

If you need to use an HTML5 player, reference the following .css file:

  1. https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css

The sample code is as follows:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
  5. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
  6. </head>
  7. </html>

SDK usage

Usage of the player SDK

In addition to video playback by using video source files, ApsaraVideo Player can also play videos by ApsaraVideo.
For more information about ApsaraVideo for VOD, see Obtain playAuth.
For more information about ApsaraVideo for Media Processing, see Playback based on ApsaraVideo for Media Processing.

For more information about visual online settings, see Online Settings. The sample code is as follows:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
  6. <title>User test case</title>
  7. <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
  8. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
  9. </head>
  10. <body>
  11. <div class="prism-player" id="J_prismPlayer"></div>
  12. <script>
  13. var player = new Aliplayer({
  14. id: 'J_prismPlayer',
  15. width: '100%',
  16. autoplay: true,
  17. // Playback method 1: playback based on a stream playback address. This method has the highest priority.
  18. source: 'stream play URL',
  19. // Playback method 2: recommended for VOD users
  20. vid : '1e067a2831b641db90d570b6480fbc40',
  21. playauth : 'ddd',
  22. cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',
  23. // Playback method 3: only applicable to ApsaraVideo for Media Processing users
  24. vid : '1e067a2831b641db90d570b6480fbc40',
  25. accId: 'dd',
  26. accSecret: 'dd',
  27. stsToken: 'dd',
  28. domainRegion: 'dd',
  29. authInfo: 'dd',
  30. // Playback method 4: playback based on STS
  31. vid : '1e067a2831b641db90d570b6480fbc40',
  32. accessKeyId: 'dd',
  33. securityToken: 'dd',
  34. accessKeySecret: 'dd'
  35. region:'cn-shanghai',//eu-central-1,ap-southeast-1
  36. },function(player){
  37. console.log('The player is created.')
  38. });
  39. </script>
  40. </body>
  41. </html>

Set isLive to true for streams playback.

For more information about parameters of playback based on ApsaraVideo for Media Processing, see Playback based on ApsaraVideo for Media Processing.

For more information about operations of ApsaraVideo Player SDK for web, see Attributes and methods.

QR code for demo of ApsaraVideo Player

Scan the following QR code to use the demo of ApsaraVideo Player.

>