chendongcd / AliyunPlayer_Web

The kinds of demo for H5 Aliplayer, which cover live, playback and multiple platforms, such as mobile, pc and weixin and so on

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scenario-based and custom-component demos of ApsaraVideo Player for web

Other Languages: 简体中文

All the following demos can be used separately. Babel 7.0 and webpack 4.0 are used for configuration.

Custom-component demo

Demo

Introduction

This demo illustrates the custom components of HTML5-based ApsaraVideo Player and can be used as a reference to implement custom components. In this demo, you can find the following common custom components:

Instructions and code

Mobile edition

Demo of Vue-based ApsaraVideo Player for VOD

This demo provides features such as playback, playlist, subtitle, multi-language, adaptive bitrate, and custom skin.

Instructions and code

Mobile edition

Demo of HTML5-based ApsaraVideo Player for VOD

This demo provides features such as playback, playlist, comment, like, and MQTT persistent session. This demo supports HTML5-based full-screen same-layer playback in WeChat for Android to resolve the full-screen playback issue.

Instructions and code

Mobile edition

Demo of WeChat applet that integrates ApsaraVideo for VOD

This demo provides features such as playlist, multi-definition, playback speed adjustment, and full-screen playback.

Instructions and code

image.png

Demo of ApsaraVideo Player for live streaming

This demo provides features such as full-screen playback, comment, like, and MQTT persistent session. This demo supports HTML5-based full-screen same-layer playback in WeChat for Android to resolve the full-screen playback issue.

Instructions and code

Mobile edition

Demo of integrated ApsaraVideo Player that supports live streaming and VOD on both PCs and mobile devices

This demo provides features such as playback, playlist, comment, and MQTT persistent session. This demo supports HTML5-based full-screen same-layer playback in WeChat for Android to resolve the full-screen playback issue.

The desktop edition or mobile edition of the player is selected automatically based on the device type.

Instructions and code

Desktop edition

Desktop edition Desktop edition

Mobile edition

Mobile edition

About

The kinds of demo for H5 Aliplayer, which cover live, playback and multiple platforms, such as mobile, pc and weixin and so on


Languages

Language:JavaScript 79.3%Language:CSS 8.5%Language:SCSS 5.8%Language:HTML 3.3%Language:Vue 2.3%Language:EJS 0.6%Language:Shell 0.1%