Get unlimited public & private packages + package-based permissions with npm Pro.Get started »


1.2.10 • Public • Published

A lightweight and sophisticated React-based H5 video player

GitHub Travis (.org) npm package npm bundle size (version) GitHub stars

简体中文 | 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.

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 of Qier Player

Quick Start


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'));


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

Recent update history

1.2.3 (2019-11-06)

  • Added width and height api for 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 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


  • 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.


npm i qier-player

DownloadsWeekly Downloads






Unpacked Size

137 kB

Total Files


Last publish


  • avatar