ApsaraVideo Live allows you to integrate player SDKs for multiple platforms and provides stream ingest methods that adapt to different devices. You can use a player SDK with any stream ingest method to meet your requirements in different business scenarios. This topic describes how to live stream on a web page.
Prerequisites
- ApsaraVideo Live is activated. For information about how to activate ApsaraVideo Live, see Activate ApsaraVideo Live.
- The ingest domain and streaming domain that are used for live streaming are configured. For information about how to configure these domains, see Add an ingest domain and a streaming domain, Add CNAME records, and Bind the ingest domain to the streaming domain in Getting Started.
Step 1: Generate an ingest URL and a streaming URL
The ingest URL is used to ingest live streams, and the streaming URL is used to pull live streams for playback. For information about how to generate ingest and streaming URLs, see URL generator.
Step 2: Ingest live streams
Live stream ingest is the process of delivering the collected audio and video live streams to a live center of ApsaraVideo Live. The following example shows how to ingest a stream by using OBS Studio.
- Download and install OBS Studio. Download link: OBS Studio.
- Run OBS Studio.
- In the menu bar, choose .
- On the Settings page, click Stream and configure the following parameters.
Parameter Description Service Select Custom.... Server Enter the generated ingest URL that is authenticated. Example: rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************
.Stream Key Leave this parameter empty. - Go to the homepage of OBS Studio. Find the Sources section, add a source, and then click Start Streaming.
Step 3: Play live streams
You can use ApsaraVideo Player SDK for Web to play live streams. ApsaraVideo Player SDK for Web allows you to play audio and video streams by using the HTML5 player or Flash player. Before you integrate ApsaraVideo Player SDK for Web, you must determine the player that you want to use and learn about its features and compatibility with different browsers. For more information, see Overview.
The following procedure describes how to integrate ApsaraVideo Player SDK for Web to play live streams on a web page.
- Add a specified .js file to your project. ApsaraVideo Player SDK for Web does not depend on frontend .js libraries. You can add a specified .js file to your project to initialize the player.
- Add an adaptive .js file
The adaptive .js file contains the adaptation logic for the Flash player and HTML5 player on multiple devices. After the .js file is added, ApsaraVideo Player SDK for Web automatically selects a player according to the environment.
<head> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" /> // Optional. If you want to use the HTML5 player for playback, you must add the .css file to your project. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script> // Required. You must add the .js file. </head>
Note After the adaptive .js file is added, setuseFlashPrism=true
to use the Flash player or setuseH5Prism=true
to use the HTML5 player. - Add a single-mode .js fileIf you use only the Flash player or HTML5 player, you can add the .js file for only the player that you use to your project to reduce the file size.
- The following sample code provides an example on the .js file if you want to use the HTML5 player:
<head> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" /> // Required. You must add the .css file to use the HTML5 player. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script> // Required. You must add the .js file for the HTML5 player. </head>
- The following sample code provides an example on the .js file if you want to use the Flash player:
<head> <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-flash-min.js"></script> // Required. You must add the .js file for the Flash player. </head>
- The following sample code provides an example on the .js file if you want to use the HTML5 player:
To use the Flash player in Internet Explorer 8, you must add the reference to the json.min.js file in the browser. Sample code:https://g.alicdn.com/de/prismplayer/2.15.2/json/json.min.js
- Add an adaptive .js file
- Specify a container for the player.
<body> <div id="J_prismPlayer"></div> </body>
- Instantiate the player. To stream content from URLs, you must set the source parameter to the streaming URL and the isLive parameter to true. The streaming URL can be a third-party streaming URL or a streaming URL that is generated in ApsaraVideo Live. For more information about how to obtain an Alibaba Cloud 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 can be a third-party streaming URL or a streaming URL that is generated in ApsaraVideo Live. isLive: true,// Specify whether the content that you want to play is a live steam. },function(player){ console.log('The player is created.') }); </script>
Online trial and source code of demos
Try the demo for PCs
Try the demo for mobile devices
Feature-related source code of demos
Source code of the demo for integration with Vue
ApsaraVideo Player SDK for web provides you with the source code of the demo for integrating ApsaraVideo Player SDK for web with the Vue framework.
For more information about the demo, visit 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 Demo of WeChat applet that integrates ApsaraVideo VOD.
References
- When you use ApsaraVideo Player SDK for Web, the settings of commonly used features may vary with different players, playback methods, or browser environments. You can configure these features based on your business requirements. For more information, see Basic features.
- ApsaraVideo Player SDK for Web also provides some advanced features, including features for playback control and the playback of long videos. For more information, see Advanced features.
- For information about the API operations of ApsaraVideo Player SDK for Web, see API operations.
- For answers to some commonly asked questions about ApsaraVideo Player SDK for Web, see FAQ about ApsaraVideo Player for Web.