sunmoon-player

A lightweight and sophisticated React-based H5 video player

简体中文 | English

Introduction

Qier-player is a web video player component for React, It has a simple interface and smooth operation which supports the most functions of other video players. In addition, Qier-player can switch between video resolutions (4K, 2K, 1080P, 720P and 480P) if desired.

Keyboard Shortcuts

For these to work, the player must be in focus.

• Up arrow key: Volume up
• Down arrow key: Volume down
• Left arrow key: Rewind 3 seconds
• Right arrow key: Skip forward 3 seconds
• Space key: Toggle play/pause

Here is an official demo site showing the player in use.

Screenshot

Quick Start

Install

npm install --save qier-player

Use

import React from 'react';
import ReactDOM from 'react-dom';
import QierPlayer from 'qier-player';

ReactDOM.render(<QierPlayer srcOrigin="Your video addedress" />, document.getElementById('root'));

API

Parameter	Description	Types	Defaults
width	setting the video width (e.g. 740 or "100%")	number | string	740
height	setting the video height (e.g. 420 or "100%")	number | string	420
language	language: 'en' is English and 'zh' is Chinese	"en" | "zh"	'en'
themeColor	theme color (only supports hexadecimal color)	string	'#f23300'
src480p	480p source URL	boolean | string	false
src1080p	1080p source URL	boolean | string	false
src720p	720p source URL	boolean | string	false
src2k	2K source URL	boolean | string	false
src4k	4K source URL	boolean | string	false
srcOrigin	origin source URL (set this if not using specific resolution sources)	boolean | string	false