All Products
Search
Document Center

Integration

Last Updated: Jul 11, 2019

Supported format

ApsaraVideo Player SDK supports playback by Flash and HTML5.

  • Flash mode:

    • Video formats: MP4, FLV, M3U8, and RTMP
    • Video encoding formats: H. 264
    • Audio encoding formats: AAC and MP3
    • Audio formats: MP3
  • HTML5 mode:

    • Video formats: MP4, M3U8, and FLV
    • Video encoding formats: H. 264
    • Audio encoding formats: AAC
    • Audio formats: MP3

Adaptability

  • Flash mode
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 enable Flash player support in Internet Explorer 8, you need to add json.min.js reference to the page.

```
https://g.alicdn.com/de/prismplayer/2.8.1/json/json.min.js
``` 
  • HTML5 mode
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 49 and later Firefox 49 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 plugin must be installed to play M3U8 videos in PC-based Google Chrome web browser on mobile simulators.

  • HLS Encryption-based and Alibaba Cloud Encryption-based HTML5 playback
iOS Android PC
HLS Encryption Google Chrome
FireFox
Safari
Microsoft Edge
Internet Explorer V11.0 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

We recommend that you use Google Chrome for Alibaba Cloud Encryption playback.

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

  • Enable anti-debugging for Alibaba Cloud Encryption

Import the aliiplayer-vod-anti-min.js file to enable anti-debugging. Considering the debugging during development, you can import the JavaScript file to a launched product. The file can be accessed through the following address:

<script src="https://g.alicdn.com/de/prismplayer/2.8.1/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.

By default, mobile-based web browsers play videos in full-screen mode. The setting varies depending on different situations.

  1. iOS app: To enable inline playback in an iOS app, 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 app in inline mode.
  2. Safari: Automatic video playback in full-screen mode cannot be disabled in Safari earlier than iOS 10.
  3. 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 Tenant browser or WeChat) to achieve an effect similar to inline playback.

  4. The setting of autoplay to true is invalid on mobile platforms, and autoplay fails.

  5. To enable autoplay in an HTML5 player, you can 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. Web browsers with certain features and WebView (especially in Android) may allow autoplay.

  6. Autoplay is limited by web browsers later than MacOS High Sierra Safari 11.
  7. Autoplay is limited by web browsers later than Google Chrome 55.

  8. The volume adjustment methods (getVolume and setVolume) are ineffective in iOS apps and some Android apps.

  9. 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.

  10. 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 is supported.

How do I import the .js file?

You can initialize a player only by referencing the following .js file on the page, without any dependence on the front end .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".

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

The preceding 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:

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

HTML5 version:

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

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

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

The sample code is as follows:

<! DOCTYPE html> 
<html>
    <head>
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
    </head>
</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:

<! DOCTYPE html> 
<html>
    <head>
     <meta charset="UTF-8">
     <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
     <title>User test case</title>
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
     <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
    </head>
    <body>
        <div  class="prism-player" id="J_prismPlayer"></div>
        <script>
            var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            autoplay: true,

            //Supports playing based on a streaming URL, which has the highest priority.
            source: 'stream play URL',

            //Playback method 2: recommended for ApsaraVideo for VOD users
            vid : '1e067a2831b641db90d570b6480fbc40',
            playauth : 'ddd',
            cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png',            

            //Playback method 3: only applicable to ApsaraVideo for Media Processing users
            vid : '1e067a2831b641db90d570b6480fbc40',
            accId: 'dd',
            accSecret: 'dd',
            stsToken: 'dd',
            domainRegion: 'dd',
            authInfo: 'dd',

            //Playback method 4: based on STS
            vid : '1e067a2831b641db90d570b6480fbc40',
            accessKeyId: 'dd',
            securityToken: 'dd',
            accessKeySecret: 'dd',
             region:'cn-shanghai',//eu-central-1,ap-southeast-1
            },function(player){
                console.log('The player has been created.')
           });

        </script>
    </body>
</html>

Set isLive to true for streams playback.

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

For more features, see Attributes and API reference.

QR code for demo of ApsaraVideo Player

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

QR code | left