Live stream on a web page - ApsaraVideo Live - Alibaba Cloud Documentation Center

Prerequisites

ApsaraVideo Live is activated. For more information, see Get started with ApsaraVideo Live.
The ingest domain and streaming domain that are used for live streaming are configured. For more information, see Step 1: Add ingest and streaming domains, Step 2: Add CNAME record to enable acceleration and Step 3: Associate ingest and streaming domains.

Step 1: Generate an ingest URL and a streaming URL

Use the ingest URL to push live streams and the streaming URL to pull them for playback. For more information, see Generate ingest and streaming URLs.

On the URL generator page, configure the streaming domain, the associated ingest domain (authentication defaults to Mode A; the URL is valid for 30 minutes), AppName, StreamName, and transcoding template. Click Generate to create the ingest and streaming URLs.

Step 2: Ingest live streams

Stream ingest delivers the captured audio and video to an ApsaraVideo Live center. The following example uses OBS Studio to ingest a stream.

Note

Standard streaming does not provide a stream ingest SDK for web. Use OBS Studio or Push SDK instead. For more information about stream ingest tools, see Live stream ingest.

Download and install OBS Studio. You can download it from the OBS Studio website.
Start OBS Studio.
In the menu bar, choose File > Settings.

On the Settings page, click Stream and configure the following parameters:

Parameter	Description
Service	Select Custom.
Server	Enter the generated authenticated ingest URL. Example: `rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************`.
Stream Key	Leave the Stream Key empty.

In the OBS Studio main window, add a source in the Sources section, and then click Start Streaming.
Go to the Stream Management page. On the Active Streams tab, you can view and manage your active streams.

Step 3: Play live streams

You can use ApsaraVideo Player SDK for Web to play live streams. For more information, see Web player.

To integrate ApsaraVideo Player SDK for Web and play live streams on a web page, perform the following steps.

Add a specified .js file to your project.

ApsaraVideo Player SDK for Web does not depend on frontend .js libraries. Add the following .js file to your project to initialize the player.

<head>
  <link rel="stylesheet" href="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/skins/default/aliplayer-min.css" />  // Optional. If you want to use the HTML5 player for playback, add the .css file to your project. 
  <script charset="utf-8" type="text/javascript" src="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/aliplayer-min.js"></script>  // Required. Import the .js file. 
</head>

Specify a container for the player.

<body>
  <div id="J_prismPlayer"></div>
</body>

Instantiate the player.

To stream content from URLs, set the source parameter to the streaming URL and the isLive parameter to true. For more information about obtaining a streaming URL, see Step 1: Generate an ingest URL and a streaming URL.

Sample code for streaming from URLs:

<script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>'// The streaming URL that is generated in ApsaraVideo Live. 
    isLive: true,// Specify whether to play the live stream. 
    },function(player){
      console.log('The player is created.')
    });
</script>

Online trial and source code of demos

Try the demo for PCs

ApsaraVideo Player SDK for Web provides a visualized online trial. Visit the Online Settings page to configure basic playback features and customize the UI layout.

Note

If you use the HTML5 player for live streaming, the streaming URL must be in ARTC, FLV, or HLS format. RTMP format is not supported.

The Online Settings page has five tabs: Basic Settings, More Settings, Skin Customization, Playback Preview, and Code. In the Basic Settings form, you can configure Video Type (VOD or Live), Playback Method (URL), Playback URL, Cover URL, Width (default: 100%), and Height (default: 500px), and toggle switches for options like Autoplay, Inline Playback, Preload, and Loop.

Try the demo for mobile devices

To obtain the demo for mobile browsers, use the DingTalk app on your mobile device to scan the following QR code.

Important

On Android devices, the internal browsers in WeChat and QQ may modify the settings of ApsaraVideo Player SDK without your authorization or knowledge. In this case, specific features of ApsaraVideo Player SDK cannot be used.

二维码

Feature-related source code of demos

ApsaraVideo Player SDK for Web offers an online feature showcase that displays features alongside their code implementations. For a detailed list of features and code examples, see the Feature Showcase. The Aliplayer Feature Showcase page has three navigation tabs: Basic Functions (such as cover, delayed playback, screenshots, loop playback, and 4K video), Components and Plugins (such as image ads, marquee, resume playback, Danmu, playback speed control, and subtitle components), and Advanced Functions (such as subtitles, multiple audio tracks, multiple sources, adaptive HLS, internationalization, and custom skins). When the cover feature is selected, the left pane shows a player preview with a cover image, while the right pane displays the corresponding HTML initialization code. This code includes parameters such as source, width, height, cover, autoplay, preload, and isLive. You can click the Copy button to copy the code.

Source code of the demo for integration with Vue

ApsaraVideo Player SDK for Web provides demo source code for you to integrate the SDK with the Vue framework.

For more information about the demo, see Demo of Vue-based ApsaraVideo Player.

WeChat mini programs

A WeChat mini program lacks DOM API and BOM API. In this case, specific libraries that are commonly used in frontend development, such as jQuery and Zepto, cannot be loaded in a WeChat mini program. Similarly, ApsaraVideo Player SDK for Web, which relies on the support of browsers, cannot be run in a WeChat mini program. Therefore, you must use the default video component that is provided by a WeChat mini program to play videos. For more information, visit vod-mini-program.

References

When you use ApsaraVideo Player SDK for Web, the settings for commonly used features may vary depending on the player, playback method, or browser environment. For more information, see Basic features.
ApsaraVideo Player SDK for Web also provides advanced features, including playback control and long video playback. For more information, see Advanced features.
For the API reference of ApsaraVideo Player SDK for Web, see Aliplayer API Reference.
For FAQ about ApsaraVideo Player SDK for Web, see Player SDK for Web FAQ.