react h5 架构 react写h5页面

转载

mob6454cc690811 2024-01-30 11:15:38

文章标签 react h5 架构 react做h5 例子全屏 github 视频播放器 文章分类 架构后端开发

react h5 架构 react写h5页面_全屏

学习了 React 之后，做了多多少少的小项目，奈何自己做的再认真，都觉得是自娱自乐，找工作过程中，面试官也不承认这些自己做的项目能对工作带来多大帮助，比较迷茫，就想着做点开源玩玩，刚好也锻炼一下自己写 React 组件的能力，思来想去自己和女票都比较喜欢电影，与电影有关的有播放器这么一个想法，于是就撸了一个h5播放器，以女票的名来命名，叫做

qier-player

目前基本实现了在线播放器所需的基本功能，比如暂停、播放、全屏、音量调节、进度条拖拽、倍速等，之后再准备写一下快捷键，以及一些性能优化，有兴趣的朋友可以了解下，万一你的项目中要用到播放器，又不想自己重新写一个，又嫌原生的播放器功能太少，或者不太美观，那这里就是给你提供便利的地方了～～

以下是这个开源组件的源代码

https://github.com/vortesnail/qier-playergithub.com

介绍

qier-player 是一个基于 React 编写的在线视频播放器组件，界面简洁，操作流畅，具有大部分视频播放器的基础功能。支持视频清晰度的切换，提供了原画、4K、2K、1080P、720P、480P 的视频源接口。

演示官网(tip: 演示的视频没有放cdn，下载比较慢，比较卡，需要等它加载完)

示例

react h5 架构 react写h5页面_react h5 架构_02

快速开始

安装

npm install --save qier-player

使用

import React from 'react';
import ReactDOM from 'react-dom';
import QierPlayer from 'qier-player';

ReactDOM.render(<QierPlayer srcOrigin="你的视频地址"/>, document.getElementById('root'));