React项目使用video.js（7.6.0）播放RTMP流（flash）

yarn add video.js
yarn add videojs-flash

import React from 'react';
import videojs from 'video.js'

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div> 
        <div data-vjs-player>
          <video ref={ node => this.videoNode = node } className="video-js"></video>
        </div>
      </div>
    )
  }
}

改动

import React from 'react';
import videojs from 'video.js'
import videozhCN from 'video.js/dist/lang/zh-CN.json'; //播放器中文，不能使用.js文件
import 'video.js/dist/video-js.css';  //样式文件注意要加上
import 'videojs-flash';  //如果要播放RTMP要使用flash 需要先npm i videojs-flash

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate Video.js
    //这里的this.props是上级传进来的video的options
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
    videojs.addLanguage('zh-CN', videozhCN);

    // this.player.liveTracker.on('liveedgechange', () => {
      // console.log('跟随直播');
      // this.player.liveTracker.seekToLiveEdge();
    // });
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div> 
        <div data-vjs-player>  {/*这个带有属性的div目前没看到作用，可以去掉*/}
          <video ref={ node => this.videoNode = node } className="video-js"></video>
        </div>
      </div>
    )
  }
}

调用

import VideoPalyer from '../../components/VideoPlayer';  //先引入子组件

render(){
  const videoJsOptions = {
      autoplay: true,  //自动播放
      language: 'zh-CN', 
      controls: true,  //控制条
      preload: 'auto',  //自动加载
      errorDisplay: true,  //错误展示
      width: 500,  //宽
      height: 300,  //高
      // fluid: true,  //跟随外层容器变化大小，跟随的是外层宽度
      // controlBar: false,  // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但还是存在
      // textTrackDisplay: false,  // 不渲染字幕相关DOM
      userActions: {
        hotkeys: true  //是否支持热键
      },
      sources: [
        {
           src: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1',
           type: "rtmp/flv",  //类型可加可不加，目前未看到影响
          // type: 'video/mp4',
        }
      ]
  };
  return(
    <div>
      <VideoPlayer {...videoJsOptions} />
    </div>
  )
}

官方文档
https://docs.videojs.com/tutorial-react.html

几个概念

• HLS（ HTTP Live Streaming）苹果公司提出的流媒体协议，直接把流媒体切片成一段段，信息保存到m3u列表文件中， 可以将不同速率的版本切成相应的片；播放器可以直接使用http协议请求流数据,可以在不同速率的版本间自由切换，实现无缝播放；省去使用其他协议的烦恼。缺点是延迟大小受切片大小影响，不适合直播，适合视频点播
• RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的，基于文本的多媒体播放控制协议. RTSP定义流格式，流数据经由RTP传输；RTSP实时效果非常好，适合视频聊天，视频监控等方向。
• RTMP（Real Time Message Protocol） 有 Adobe 公司提出，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题， 优势在于低延迟，稳定性高，支持所有摄像头格式，浏览器加载 flash插件就可以直接播放。

使用Video.js加载HLS视频流
https://blog.csdn.net/qq_25040155/article/details/94608778