ALIPLAYER-REACT

React component wrapper for aliplayer.

Current version: 2.8.2 with additional components built by aliplayer-components.

Installation

npm i aliplayer-react-components-wrapper

Usage

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Player from "aliplayer-react-components-wrapper";

const config = {
	source: "//player.alicdn.com/video/aliyunmedia.mp4",
	width: "100%",
	height: "500px",
	autoplay: true,
	isLive: false,
	rePlay: false,
	playsinline: true,
	preload: true,
	controlBarVisibility: "hover",
	useH5Prism: true,
	components: [
		{
			name: "RateComponent",
			type: Player.components.RateComponent,
		},
	],
};

class App extends Component {
	state = {
		instance: null, // player instance, e.g: player.stop();
	};
	render() {
		return (
			<div>
				<Player
					config={config}
					onGetInstance={(instance) => this.setState({ instance })}
					// Optional: custom cdn url
					// sourceUrl={'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'}
				/>
			</div>
		);
	}
}

ReactDOM.render(<App />, document.getElementById("root"));