GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → vortesnail → Qier Player

vortesnail / Qier Player

Licence: mit
🎬 A lightweight and sophisticated React-based H5 video player / 简单易用的h5播放器

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactvideoplayerreact-componentsvideo-player

Projects that are alternatives of or similar to Qier Player

Dkvideoplayer
Android Video Player. 安卓视频播放器，封装MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音并实现预加载，列表播放，悬浮播放，广告播放，弹幕
Stars: ✭ 3,796 (+954.44%)
Mutual labels:  player, video-player
angular-youtube-player
Simple youtube player created with angular and typescript. See demo.
Stars: ✭ 35 (-90.28%)
Mutual labels:  player, video-player
nplayer
🚀 支持移动端、支持 SSR、支持直播，可以接入任何流媒体。高性能的弹幕系统。高度可定制，所有图标、主题色等都可以替换，并且提供了内置组件方便二次开发。无第三方运行时依赖。
Stars: ✭ 897 (+149.17%)
Mutual labels:  player, video-player
aos-Video
NOVA opeN sOurce Video plAyer: player frontend main UI
Stars: ✭ 35 (-90.28%)
Mutual labels:  player, video-player
kaltura-player-js
Kaltura Player JS Platform - Cloud TV and OVP Media Players
Stars: ✭ 83 (-76.94%)
Mutual labels:  player, video-player
shaka-player-react
A simple React component wrapper for shaka-player
Stars: ✭ 79 (-78.06%)
Mutual labels:  player, video-player
danmaku-player
An HTML5 danmaku video player for real-time image processing using WebGl and Web Components.融合了webgl和web components的实时图像处理弹幕播放器
Stars: ✭ 40 (-88.89%)
Mutual labels:  player, video-player
Rtsp.player.android
RTSP player for Android / IP camera viewer
Stars: ✭ 199 (-44.72%)
Mutual labels:  player, video-player
clappr-core
Core components of the Clappr player architecture
Stars: ✭ 41 (-88.61%)
Mutual labels:  player, video-player
niki
Media Player, DLNA, Music, Video and Streaming
Stars: ✭ 14 (-96.11%)
Mutual labels:  player, video-player
api.video-player-sdk
SDK to control and interact with the api.video HTML5 Player
Stars: ✭ 31 (-91.39%)
Mutual labels:  player, video-player
KingPlayer
🎬 一个专注于 Android 视频播放器的基础库，无缝切换内核。（IjkPlayer、ExoPlayer、VlcPlayer、MediaPlayer）
Stars: ✭ 35 (-90.28%)
Mutual labels:  player, video-player
files videoplayer
📼 Old video viewer for Nextcloud
Stars: ✭ 92 (-74.44%)
Mutual labels:  player, video-player
Giraffeplayer2
out of the box android video player（support lazy load, ListView/RecyclerView and hight performance）
Stars: ✭ 344 (-4.44%)
Mutual labels:  player, video-player
Eplayer
🔮 A web-component html5 video player facing future
Stars: ✭ 253 (-29.72%)
Mutual labels:  player, video-player
react-native-vlc-media-player
React native media player for video streaming and playing. Supports RTSP, RTMP and other protocols supported by VLC player
Stars: ✭ 221 (-38.61%)
Mutual labels:  player, video-player
Sjvideoplayer
iOS VideoPlayer MediaPlayer video player media player 短视频播放器 可接入 ijkplayer aliplayer alivodplayer plplayer
Stars: ✭ 2,066 (+473.89%)
Mutual labels:  player, video-player
Libvlc Go
Go bindings for libVLC and high-level media player interface
Stars: ✭ 188 (-47.78%)
Mutual labels:  player, video-player
deplayer
Decentralized mediaplayer which runs entirely in the browser.
Stars: ✭ 14 (-96.11%)
Mutual labels:  player, video-player
X1Player
iOS端封装的视频播放器.支持直播，录播视频的播放,支持常用的播放界面控制，类似于ijkplayer 优点是体积更小,使用快捷
Stars: ✭ 21 (-94.17%)
Mutual labels:  player, video-player
View All Similar Projects ➔

Version 2.x coming soon...

Below is Version 1.x README.md

A lightweight and sophisticated React-based H5 video player

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

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

Screenshot of Qier Player

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

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].