video-player-hooks

基于 React Hooks 和 video.js 的在线流媒体解决方案

Usage no npm install needed!

<script type="module">
  import videoPlayerHooks from 'https://cdn.skypack.dev/video-player-hooks';
</script>

README

video-player-hooks

基于 React Hooks 和 video.js 的在线流媒体解决方案

Install

npm install video-player-hooks -S

Example

import VideoPlayer from 'video-player-hooks';

// ...

<VideoPlayer
  src={'**********.m3u8'}
  onPlay={(player) => {
    if (!player) return;
    console.log('play:', player.cache_.src);
  }}
  onError={(player) => {
    if (!player) return;
    console.log('error', player.cache_.src);
    // 重新加载
    player.reset();
    player.src({
      type: 'application/x-mpegURL',
      src: player.cache_.src
    });
  }}
/>;

// ...

API

key 描述 类型
src 播放地址 string
id 视频容器 id string
className 类名 string
theme 主题 'light'或'night'
option videojs 配置 VideoJsPlayerOptions
onPause 暂停回调 (VideoJsPlayer) => void
onError 错误回调 (VideoJsPlayer) => void
onPlay 播放(还未开始) (VideoJsPlayer) => void
canPlay 已经开始播放 (VideoJsPlayer) => void
onBeforeChange 切换源前 (VideoJsPlayer) => void
onDestroy 销毁回调 (VideoJsPlayer) => void