1.2.6 • Published 4 years ago
sunmoon-player v1.2.6
简体中文 | 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 upDown
arrow key: Volume downLeft
arrow key: Rewind 3 secondsRight
arrow key: Skip forward 3 secondsSpace
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 |