大屏需要展示flv格式视频监控的解决方案，找到两种：方案1使用LiveQing插件，方案2通过封装 Flv.js
方案1. LiveQing插件
官网地址：LivePlayer
如何在react中使用
上图点击下载，会有Demo用例，或者参考LivePlayer脱离vue使用
简单来说就是，
将3个文件下载并copy到根目录
node_modules/@liveqing/liveplayer/dist/element/liveplayer.swf
node_modules/@liveqing/liveplayer/dist/element/crossdomain.xml
node_modules/@liveqing/liveplayer/dist/element/liveplayer-element.min.js
在 index.html 中引用 liveplayer-element.min.js，在项目中使用live-player就可以了
<!DOCTYPE HTML>
<html>
<head>
<title>liveplayer</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引用 liveplayer-element.min.js -->
<script type="text/javascript" src="liveplayer-element.min.js"></script>
</head>
<body>
<live-player video-url="http://live.hkstv.hk.lxdns.com/flv/hks.flv" live="true" stretch="true"></live-player>
</body>
</html>
如何自适应 div
设置live-player aspect='fullscreen'，父级元素加上 position: relative
方案2. 封装 Flv.js
Flv.js 是 B站开源的播放器，开源用于播放 flv 的视频流而不依赖 flash。在React项目中如何集成？
flv.js 是一个HTML5 Flash视频(FLV)播放器，它通过纯JavaScript编写，没有使用 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器。
安装flv.js
npm i flv.js
封装一个Reflv组件
// Reflv.jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import flvjs from 'flv.js';
/**
* react component wrap flv.js
*/
export default class Reflv extends Component {
static propTypes = {
className: PropTypes.string,
style: PropTypes.object,
/**
* media URL, can be starts with 'https(s)' or 'ws(s)' (WebSocket)
*/
url: PropTypes.string,
/**
* media type, 'flv' or 'mp4'
*/
type: PropTypes.oneOf(['flv', 'mp4']).isRequired,
/**
* whether the data source is a **live stream**
*/
isLive: PropTypes.bool,
/**
* whether to enable CORS for http fetching
*/
cors: PropTypes.bool,
/**
* whether to do http fetching with cookies
*/
withCredentials: PropTypes.bool,
/**
* whether the stream has audio track
*/
hasAudio: PropTypes.bool,
/**
* whether the stream has video track
*/
hasVideo: PropTypes.bool,
/**
* total media duration, in milliseconds
*/
duration: PropTypes.bool,
/**
* total file size of media file, in bytes
*/
filesize: PropTypes.number,
/**
* Optional field for multipart playback, see MediaSegment
*/
segments: PropTypes.arrayOf(PropTypes.shape({
/**
* indicates segment duration in milliseconds
*/
duration: PropTypes.number.isRequired,
/**
* indicates segment file size in bytes
*/
filesize: PropTypes.number,
/**
* indicates segment file URL
*/
url: PropTypes.string.isRequired,
})),
/**
* @see https://github.com/Bilibili/flv.js/blob/master/docs/api.md#config
*/
config: PropTypes.object,
}
initFlv = ($video) => {
if ($video) {
if (flvjs.isSupported()) {
let flvPlayer = flvjs.createPlayer({ ...this.props }, this.props.config);
flvPlayer.attachMediaElement($video);
flvPlayer.load();
flvPlayer.play();
this.flvPlayer = flvPlayer;
}
}
}
componentWillUnmount() {
if (this.flvPlayer) {
this.flvPlayer.unload();
this.flvPlayer.detachMediaElement();
}
}
render() {
const { className, style } = this.props;
return (
<video
className={className}
controls={true}
style={Object.assign({
width: '100%',
}, style)}
ref={this.initFlv}
muted
/>
)
}
}
编写Demo
// Demo.jsx
import React, { useState, useEffect } from 'react';
import Reflv from './reflv';
export default function Demo() {
return(
<Reflv url='url地址' type='flv'></Reflv>
)
}
