直接上代码： 下载：：npm install --save flv.js flv.js
import flvjs from "flv.js"; useEffect(() => { if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://192.168.31.14:8080/live?port=1935&app=myapp&stream=mystream', config:{ enableWorker: true, enableStashBuffer: false, stashInitialSize: 128, }, }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => { console.log(errType, errDetail) }) } }, []) <video id="videoElement" controls muted style={{width:'1000px',height:'500px'}}> </video>【问题】： 如果视频流有问题的话会直接报错： 【解决办法】： 加上这个错误处理就没有页面报错了
flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => { console.log(errType, errDetail) })video.js：
import React from 'react'; import videojs from 'video.js'; import 'video.js/dist/video-js.css'; export default class VideoPlayer extends React.Component { componentDidMount() { let config = { autoplay: true, controls: true, sources: [{ src: this.props.src, type: 'application/x-mpegURL' }] } this.player = videojs(this.videoNode, config , function onPlayerReady() { console.log('onPlayerReady', this); }); this.player.play(); } componentWillUnmount() { if (this.player) { this.player.dispose(); } } render() { return ( <div> <div data-vjs-player style={{width:'300px',height:'200px'}}> <video ref={ node => this.videoNode = node } className="video-js vjs-default-skin video" muted></video> </div> </div> ); } } import React, { useEffect, useState } from 'react'; import { connect } from 'dva'; import VideoPlayer from './VideoPalyer'; import 'video.js/dist/video-js.min.css'; const monitorView = props => { return ( <div> <VideoPlayer src='http://192.168.31.14:8080/hls/test.m3u8' ></VideoPlayer> </div> ); } export default monitorView;