kingkorean / qier-player

:clapper: A lightweight and sophisticated React-based H5 video player

A lightweight and sophisticated React-based H5 video player

简体中文 | English

Introduction

Qier-player is a web video player component based on the React with a simple interface and smooth operation which supports the most functions of other player. Note that, Qier-player can switch the video clarity and provide the video source interface of original video, 4K, 2K, 1080P, 720P and 480P.

Feature

Video should be on focused, then:

• Top arrow keys: volume increase
• Bottom arrow keys: volume reduction
• Left arrow keys: Rewind 3 seconds
• Right arrow keys: fast forward 3 seconds
• Space keys: pause/play

Here is Demo official website, click me to check

example

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	number	740
height	setting the video height	number	420
language	language option:'en' is English and 'zh' is Chinese	string	'en'
showVideoQuality	Control the display and hide of the sharpness options	boolean	false
themeColor	Change the theme color (currently only supports hexadecimal color)	string	'#f23300'
src480p	480P source option	boolean | string	false
src720p	720P source option	boolean | string	false
src1080p	1080P source option	boolean | string	false
src2k	2K source option	boolean | string	false
src4k	4K source option	boolean | string	false
srcOrigin	origin source option(If no other option, it is recommended to configure this option, all other settings are false)	boolean | string	false

Recent update history

1.2.3 (2019-11-06)

• Added width and height api to setting your own video width and height

1.2.2 (2019-11-04)

• Added theme colour modification interface
• Added language change API, 'en' is English, 'zh' is Chinese

1.1.2 (2019-11-01)

• Added auto hide function：When the mouse is hovering over the video page, the controller and mouse are hidden after 1.8s.

1.1.1 (2019-10-29)

• Added the prompt "Sorry! The video could not be found (. ́< ̀.)" When the video addedress is not found,
• Added a hint animation "Buffering..." while the video is loading
• Fixed a bug where custom shortcuts conflicted with browser shortcuts

Acknowledgements

• Thanks to kaiseixd for his inspiration when I was in trouble.
• Thanks to the screenfull plugin and the its author.
• Thanks to fanzy for tranlsating README
• Thanks to iconfont as an unselfish icon creator.