Skip to content
🎬 A lightweight and sophisticated React-based H5 video player
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example/src
src
.babelrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README-zh-Hans.md
README.md
package.json
webpack.common.config.js
webpack.dev.config.js
webpack.prod.config.js

README.md

A lightweight and sophisticated React-based H5 video player

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

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

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.
You can’t perform that action at this time.