ApsaraVideo Player SDK supports playback by Flash and HTML5.
- Video formats: MP4, FLV, M3U8, and RTMP
- Video encoding formats: H. 264
- Audio encoding formats: AAC and MP3
- Audio formats: MP3
- Video formats: MP4, M3U8, and FLV
- Video encoding formats: H. 264
- Audio encoding formats: AAC
- Audio formats: MP3
- Flash mode
|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|
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
|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 laterfor Windows 8.1 and later||Internet Explorer 11 and laterfor Windows 8.1 and later||×||Internet Explorer 9 and later|
|Safari||√||Safari 8 and later||Safari 8 and later||×||√|
HTML5 players do not support FLV and RTMP videos on mobile platforms.
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
|HLS Encryption||√||√||Google ChromeFireFoxSafariMicrosoft EdgeInternet Explorer V11.0 and later for Windows 8.1 and later|
|Alibaba Cloud Encryption||×||Chrome for Android||Google ChromeFireFoxSafariMicrosoft EdgeInternet 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
<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.
- 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.
- 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.
- Safari: Automatic video playback in full-screen mode cannot be disabled in Safari earlier than iOS 10.
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.
The setting of autoplay to true is invalid on mobile platforms, and autoplay fails.
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.
- Autoplay is limited by web browsers later than MacOS High Sierra Safari 11.
Autoplay is limited by web browsers later than Google Chrome 55.
The volume adjustment methods (getVolume and setVolume) are ineffective in iOS apps and some Android apps.
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 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".
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.
If you need to use an HTML5 player, reference the following .css file:
The sample code is as follows:
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:
truefor 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.