theia-video

介绍

基于flv.js，hls.js，mp4 的 React 封装版本

快速开始

1. 安装

$ npm install @sl-theia/theia-video

2. 使用

使用常规 MP4 播放

import React from "react";
import TheiaVideo from "@sl-theia/theia-video";
import ReactDOM from "react-dom";

ReactDom.render(
  <TheiaVideo
    type="mp4"
    src="//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
    config={{
      loop: true,
    }}
  />,
  document.getElementById("root")
);

使用常规 flv 直播

import React from "react";
import TheiaVideo from "@sl-theia/theia-video";
import ReactDOM from "react-dom";

ReactDom.render(
  <TheiaVideo
    type="flv"
    src="//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"
    config={{
      isReload: true,
    }}
  />,
  document.getElementById("root")
);

通用参数描述

| 属性 | 子参数 | 说明 | 类型 | 默认值 | 必填 | 版本 | | ------ | -------- | ------------ | -------- | ------ | ---- | ---- | | type | | 视频类型 | string | mp4 | 是 | | | src | | 视频地址 | string | "" | 否 | | | config | | 视频配置参数 | []object | | 是 | | | | isReload | 异常重刷机制 | boolean | true | 否 | | | | autoPlay | 自动播放 | boolean | false | 否 | | | | poster | 封面图 | string | "" | 否 | | | | controls | 控制器 | boolean | false | | |

mp4 模式下参数

| 属性 | 子参数 | 说明 | 类型 | 默认值 | 描述 | | ------ | ------ | ------------ | -------- | ------ | ---------------- | | config | | 视频配置参数 | []object | | | | | loop | 循环播放 | boolean | false | 开启播放默认静音 | | | muted | 静音 | boolean | false | | | | | | | | |

flv 模式下参数

| 属性 | 子参数 | 说明 | 类型 | 默认值 | 描述 | | ------ | --------------- | -------------- | ----------- | ----------------------------------------------------------- | -------------------------- | | config | | 视频配置参数 | []object | | | | | mediaDataSource | flvjs 流配置项 | object | { isLive:true, cors:true, hasVideo:true, hasAudio:false } | 默认开启视频流，关闭音轨流 | | | | | mediaConfig | flvjs 配置项 | object |

hls 模式下参数

| 属性 | 子参数 | 说明 | 类型 | 默认值 | 描述 | | ------ | --------------- | -------------- | -------- | ------ | ---- | | config | | 视频配置参数 | []object | | | | | ...hlsjs_config | hlsjs 默认配置 | | | |