A lightweight and sophisticated React-based H5 video player
简体中文 | English
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.
For these to work, the player must be in focus.
Uparrow key: Volume up
Downarrow key: Volume down
Leftarrow key: Rewind 3 seconds
Rightarrow key: Skip forward 3 seconds
Spacekey: Toggle play/pause
Here is an official demo site showing the player in use.
npm install --save qier-player
import React from 'react'; import ReactDOM from 'react-dom'; import QierPlayer from 'qier-player'; ReactDOM.render(<QierPlayer srcOrigin="Your video addedress" />, document.getElementById('root'));
||setting the video width (e.g.
||number | string||740|
||setting the video height (e.g.
||number | string||420|
||language: 'en' is English and 'zh' is Chinese||"en" | "zh"||'en'|
||theme color (only supports hexadecimal color)||string||'#f23300'|
||480p source URL||boolean | string||false|
||1080p source URL||boolean | string||false|
||720p source URL||boolean | string||false|
||2K source URL||boolean | string||false|
||4K source URL||boolean | string||false|
||origin source URL (set this if not using specific resolution sources)||boolean | string||false|
Recent update history
heightapi for setting your own video width and height
- Added theme colour modification interface
- Added language change API, 'en' is English, 'zh' is Chinese
- Added auto hide function：When the mouse is hovering over the video page, the controller and mouse are hidden after 1.8s.
- Added the prompt "Sorry! The video could not be found (. ́< ̀.)" when the video source URL is not found
- Added a hint animation "Buffering..." while the video is loading
- Fixed a bug where custom shortcuts conflicted with browser shortcuts