All Products
Search
Document Center

ApsaraVideo VOD:Online trial and source code of demos

Last Updated:Jan 25, 2024

This topic describes how to apply for the online trial of ApsaraVideo Player SDK for Web and obtain the demo source code.

Demo for desktop browsers

ApsaraVideo Player SDK for Web provides a visualized online trial. You can apply for an online trial on the Online Settings page. You can configure basic playback features and set the UI layout online. After you complete the configurations, code is generated for both the HTML5 player and Flash player.

Note

If you use the HTML5 player to play live streams, the streaming URL must be in the Flash Video (FLV) format. You cannot use streaming URLs that are in the Real-Time Messaging Protocol (RTMP) format.

配置

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 source code

You can use the features of ApsaraVideo Player SDK for Web and view the corresponding source code on the Functions page of the Aliplayer website. For more information about the basic features, components, and advanced features, visit the Functions page.功能展示

Demo source code for Vue

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

You can visit GitHub to download the demo.

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.

uni-app

uni-app is a framework that uses Vue 2 and Vue 3 to develop applications. It is compatible with multiple devices across multiple platforms. ApsaraVideo Player SDK for Web depends on the native Web APIs of browsers, such as Media Source Extensions (MSE) and WebAssembly (WASM). uni-app is not compatible with the APIs and cannot run on platforms other than the HTML5 player. You can use uni-app only in the HTML5 player.

You can use only the script tag to integrate ApsaraVideo Player SDK for Web. You can dynamically add tags to integrate uni-app. Sample code:

Show code

<template>
	<view class="container">
		<p>VUE2 Demo</p>
		<div id="url-player-test"></div>
	</view>
</template>

<script>
	export default {
		mounted() {
      // Use the script and link tags to add the CSS file and ApsaraVideo Player SDK for Web package to uni-app.
			this.loadWebPlayerSDK().then(() => {
        // Initialize the player after the SDK is loaded.
				let player = new Aliplayer({
					id: "url-player-test",
					source: "//player.alicdn.com/video/aliyunmedia.mp4",
					width: "100%",
					height: "100%",
					autoplay: true,
					rePlay: false,
					playsinline: true,
					preload: true,
					controlBarVisibility: "always",
					keyShortCuts: false,
					showBuffer: true,
				}, function (player) {
				});
				player.one('canplay', function(){
					console.log('canplay', player.tag);
					player.tag.play();
				});
			}).catch((e) => {
				console.log("Loading of the player SDK failed.", e);
			});
		},
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		methods: {
			loadWebPlayerSDK() {
				return new Promise((resolve, reject) => {
					const s_tag=document.createElement ('script'); // Add the JavaScript file of the SDK.
					s_tag.type = 'text/javascript';
					s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.19.0/aliplayer-min.js';
					s_tag.charset = 'utf-8';
					s_tag.onload = () => {
						resolve();
					}
					document.body.appendChild(s_tag);
					const l_tag=document.createElement ('link'); // Add the CSS file of the SDK.
					l_tag.rel = 'stylesheet';
					l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.19.0/skins/default/aliplayer-min.css';
					document.body.appendChild(l_tag);
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		height: 800px;
	}
</style>