vortesnail / qier-player

:clapper: A simple and easy-to-use h5 video player with highly customizable UI and rich features. / 简单易用的h5播放器，UI 高度定制化，功能丰富。

qier-player

简体中文 | English

Introduction

qier-player is a simple and easy-to-use h5 video player with highly customizable UI and rich features.

Screenshot

Quick Start

Install

npm package install:

npm install --save qier-player
# or
yarn add qier-player

Of course you can also use CDN service:

<script src="https://unpkg.com/qier-player@latest/dist/umd/index.min.js"></script>

Use

import Player from 'qier-player';

const player = new Player({
  src: 'https://vortesnail.github.io/qier-player-demo/static/media/video480p.d116ba09.mp4',
});
player.mount('#app');

Ecosystem

Name	version	gzip size
qier-player-for-react

Future features

• @qier-player/vue for Vue developer.
• @qier-player/danmaku plungin.

qier-player's Issues

能增加一些回调函数吗？ 如 onPlay onPause onError

替换官网使用文档中例子的视频链接，出现以下错误

是否可以支持直播流

比如 .flv 或者 rtmp://. Thank you😊

试一下这个

https://github.com/vortesnail/qier-player/blob/e2bdcb46bc04beb6098d65023e013b6237be38ef/src/component/controls/index.js#L223-#L236

  handleChangePlayState() {
    if (this.state.isPlay) {
      this.props.videoRef.current.pause();
      this.setState({ isPlay: false });
      // 这条 return 语句必须的加，不然下面的代码也会执行。。
      // 黑科技。。
      // 不是说 setState 是异步吗？？？
      return;
    }
    if (!this.state.isPlay) {
      this.props.videoRef.current.play();
      this.setState({ isPlay: true });
    }
  }

你看看

 handleChangePlayState() {
    if (this.state.isPlay) {
      this.props.videoRef.current.pause();
      this.setState({ isPlay: false });
      // 这条 return 语句必须的加，不然下面的代码也会执行。。
      // 黑科技。。
      // 不是说 setState 是异步吗？？？     
    } else {
      this.props.videoRef.current.play();
      this.setState({ isPlay: true });
    }
  }

或者

 handleChangePlayState() {
    this.setState(preState => {
      if (preState.isPlay) {
        this.props.videoRef.current.pause();
      } else {
        this.props.videoRef.current.play();
      }
      return { isPlay: !preState.isPlay };
    });
  }

Unable to change src

I use src as a state. When I change the state, do not reload the video. Now, what must I do. Thank you

不支持服务端渲染吗？

？？？

官方示例疑似BUG？

疑似bug：这个地方点击无效？

ios 直接白屏

不相关的ISSUES

虽然不该提，但是还是想知道示例里的视频是叫什么名字。

可以添加M3u8格式的支持么

Control buttons visibility options

Can we have option to remove or add the control buttons individually, for example, I don't want the Play rate option. so can I be able to remove it?

I hope this will indeed a great feature to have the options customized.

请问支不支持倍速播放呢

打包 es 模块，node-sass 生成 .css 文件后，js 引用仍然是 .scss 问题

需要写一个类似 tscpaths 的插件，将每个 js 文件的 .scss 替换为 .css

配合路由使用，切换路径的时候会报错

复现 https://codesandbox.io/s/gracious-minsky-vti1u

当跳转到其他的url的时候，会报错

I want to disable full screen option

I want to disable the full-screen option. I am using API. Is there any way to turn off while using API

events in the module

I want to capture events when the video starts to play and when the video is finished, how do I do it?
Also, is there a way for me to continue watching the video from the previous preview?
Thank you

是否支持移动端自适应

打包优化

在你的webpack的optimization中加入以下代码
splitChunks: {
chunks: 'all',
name: false,
},