Introduction to Player SDK for Web - ApsaraVideo VOD - Alibaba Cloud Documentation Center

You can integrate Player SDK for Web into your web applications and use the SDK for live streaming and on-demand streaming. This topic describes the features of Player SDK for Web and its compatibility with browsers.

Overview

Player SDK for Web uses the <video> tag of the HTML5 player to play videos in web applications. It is compatible with multiple browsers, including Chrome and Safari, to ensure consistent video playback across various platforms. Player SDK for Web also supports features such as hotlink protection, encrypted playback, and quality monitoring based on ApsaraVideo Live and VOD.

License update

Starting December 1, 2024, a license is required before you can use Player SDK for Web V2.28.0 and later. Versions earlier than 2.28.0 are not affected by this change. However, we recommend that you update to the latest version for more comprehensive services and support. For more information, see Manage licenses.

Supported protocols

VOD scenarios

The following table describes the playback protocols and codecs supported by Player SDK for Web.

Video codec	Video protocol	Audio file format	Audio codec
H.264	MP4 FLV HLS	MP3	AAC
H.265 Note To play H.265 videos, submit a request on Yida to apply for a license. Specific browsers do not support the playback of H.265 videos. If you enable playback of H.265 videos, the loading time is extended and traffic consumption increases.	MP4 FLV HLS	None
H.266 Note To play H.266 videos, submit a request on Yida to apply for a license. Specific browsers do not support the playback of H.266 videos. If you enable playback of H.266 videos, the loading time is extended and traffic consumption increases.	MP4	None

Live streaming scenarios

The following table describes the live streaming protocols and codecs supported by Player SDK for Web.

Video codec	Video protocol	Audio codec	Audio file format
H.264	HLS, FLV, RTS, and DASH	AAC	None
H.265	HLS and FLV (codec ID = 12)
H.266	HLS and FLV

The following table describes the benefits and limits of each live streaming protocol.

Protocol	Advantage	Disadvantage	Latency
HLS	HLS is compatible with a variety of browsers.	The latency is high.	> 10s
FLV	FLV supports high concurrency and is suitable for native applications.	Browsers require integration with Player SDK for Web to play videos.	1–3s
RTS	RTS performs well under poor network conditions. Videos can be played smoothly even with a packet loss rate of up to 30%.	Browsers require integration with Player SDK for Web to play videos.	< 1s
DASH	Adaptive bitrate is supported.	The latency is high.	> 10s

Compatibility with browsers

Supported browsers for PCs

Important

To play videos in the FLV or HLS format by using browsers on PCs, you must enable cross-origin resource sharing (CORS). For more information, see Configure CORS.

Browser	MP4	FLV	HLS	MP3
Chrome	√	Google Chrome 34 and later	Google Chrome 34 and later	√
Firefox	√	Firefox 49 and later	Firefox 49 and later	√
Edge	√	√	√	√
Opera	√	√	√	√
Safari	√	Safari 8 and later	Safari 8 and later	√

Supported browsers for mobile devices

Note

Player SDK for Web does not allow you to play video streams in the FLV format on mobile browsers.

Table 1. Supported browsers on Android devices

Browser	HLS	MP4	MP3	FLV
Chrome	Google Chrome 34 and later	√	√	×
Firefox	Firefox 49 and later
WeChat	√
Edge	√
Opera	√

Table 2. Supported browsers on iOS devices

Browser	HLS	MP4	MP3	FLV
Chrome	Google Chrome 34 and later	√	√	×
Firefox	Firefox 49 and later
WeChat	√
Edge	√
Opera	√
Safari	Safari 8 and later

Features supported by browsers

Feature	PC	Mobile device	References
Full-screen playback	By default, the full-screen playback feature is disabled.	By default, the full-screen playback feature is enabled. You can disable the feature based on your needs. Note The full-screen playback feature cannot be disabled in Safari on iOS devices whose version is earlier than iOS 10. If you play videos in inline mode, you need to adjust the video size based on the resolution of transcoded videos. Otherwise, black bars may be displayed at the top and bottom of the screen.	fullscreenService.requestFullScreen()
Autoplay	The autoplay feature is not supported in the following browsers: Safari 11 and later on macOS High Sierra Google Chrome 55 and later	By default, autoplay is disabled. To enable this feature, you must configure specific settings. Note Specific browsers and WebView-based apps allow autoplay. This commonly occurs on Android devices.	Autoplay
Volume adjustment	Supported	The `video.volume` property is read-only in iOS and specific Android systems. Therefore, the `getVolume` and `setVolume` methods provided by Player SDK for Web are invalid for iOS and specific Android systems.	Adjust the volume
Playback speed	Supported	You cannot set the playback speed in specific mobile browsers, including WeChat browser for Android.	Specify the playback speed
Playback of HLS-encrypted videos	Chrome Firefox Safari Edge	Supported	How to play encrypted videos
Playback of videos encrypted with Alibaba Cloud proprietary cryptography Note For security reasons, you cannot use videos that are encrypted by using Alibaba Cloud proprietary cryptography for debugging.	Chrome Firefox Safari Edge Note Specific third-party browsers may modify playback settings to hijack video playback, preventing videos encrypted with Alibaba Cloud proprietary cryptography from playing. To address this issue, we recommend that you encrypt videos using industry-standard methods such as HLS or Digital Rights Management (DRM).	This feature is supported on iOS 14 and later. Note To use this feature on iOS 17.1 or earlier, you must install player plug-ins. For more information, see How to play encrypted videos. This feature is supported on most Android browsers. Note Videos encrypted with Alibaba Cloud proprietary cryptography may fail to play on certain browsers, including UC Browser, Quark Browser, Baidu Browser, and WeChat, DingTalk, and QQ Browser on iOS 17.1 or earlier. This issue occurs because these browsers may modify playback settings to hijack video playback. To ensure smooth playback, use a supported browser.	How to play encrypted videos
Playback of DRM-encrypted live streams	Windows Chrome Opera Firefox Edge macOS Chrome Safari Firefox Opera Edge	iOS Chrome Safari Android Google Chrome for Android 10 and later Edge	How to play encrypted videos
Playback of DRM-encrypted VOD files	Windows Chrome Opera Firefox Edge macOS Chrome Safari Firefox Opera Edge	iOS Chrome Safari Android Google Chrome for Android 10 and later Edge	How to play encrypted videos