@sl-theia/theia-video NPM

theia-video

npm.io

介绍

基于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