React使用video.js播放RTMP流_video.js rtsp_天空影的博客

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
相关文章推荐
难过的春卷 · Cannot add merged ...· 8 月前 ·
聪明的麦片 · 修改 VC 生成的 EXE 文件的图标 - ...· 1 年前 ·
行走的长颈鹿 · C#操作redis（StackExchang ...· 2 年前 ·
不要命的拖把 · 1149_Makefile学习_Window ...· 2 年前 ·
从容的蚂蚁 · spring-cloud-sleuth源码学 ...· 2 年前 ·
2020.9.5
feat ：新增独立组件，地址 FlashPlayer
功能：播放 RTMP 流，新增重连机制
未全部完成，可以做独立组件自行修改
使用方法看 FlashPlayer.stories.tsx 就行了
2020.8.5
docs ：新增高版本使用说明；新增 @ly-utils/videojs-flash 库解决后续报错问题
React使用video.js播放RTMP流
项目有播放 rtmp 视频流的功能需求，所以搞来搞去还是想着用 video.js 这个库。
基于 react , video.js@5.18.4
yarn add video.js@5.18.4 @types/video.js -D
建议使用 （使用这个库的话后续代码记得修改一下引用库名称） 
yarn add @ly-utils/video.js -D
文档：video.js 
页面中使用
 
页面中使用挺简单的 
import React, { useMemo, useState, useEffect } from 'react';
import videojs from 'video.js';
// //样式文件注意要加上
import 'video.js/dist/video-js.css';
const Player: React.FC<any> = (props) => {
  const [videoNode, setVideoNode] = useState<any>();
  const [player, setPlayer] = useState<any>();
  const url = 'rtmp://58.200.131.2:1935/livetv/hunantv';
  // rtmp播放
  useMemo(() => {
    if (videoNode) {
      const videoJsOptions = {
        autoplay: true, // 自动播放
        language: 'zh-CN',
        preload: 'auto', // 自动加载
        errorDisplay: true, // 错误展示
        width: 475, // 宽
        height: 300,
        flash: {
          swf: '/video-js.swf',
        sources: [
            src: url,
            type: 'rtmp/flv', // 类型可加可不加，目前未看到影响
      const videoPlayer = videojs(videoNode, videoJsOptions);
      setPlayer(videoPlayer);
  }, [videoNode]);
  useEffect(() => {
    return (() => {
      if (player) player.dispose()
  }, [])
  return (
      <div style={{margin:50}}>
        <p>播放器</p>
        <video
          ref={(node) => {
            setVideoNode(node);
          id="videoPlay"
          className="video-js vjs-default-skin vjs-big-play-centered"
          width="100%"
          height="100%"
          <track kind="captions" />
          <p className="vjs-no-js">您的浏览器不支持HTML5，请升级浏览器。</p>
        </video>
      </div>
export default Player;
效果（页面中使用）
 
import React, { useMemo, useState, useEffect } from 'react';
import videojs from 'video.js';
// //样式文件注意要加上
import 'video.js/dist/video-js.css';
import { Modal } from 'antd';
const playerModal: React.FC<any> = (props) => {
  const { visible, onClose } = props;
  const [videoNode, setVideoNode] = useState<any>();
  const [player, setPlayer] = useState<any>();
  console.log(1);
  const url = 'rtmp://58.200.131.2:1935/livetv/hunantv';
  // rtmp播放
  useMemo(() => {
    if (videoNode) {
      const videoJsOptions = {
        autoplay: true, // 自动播放
        language: 'zh-CN',
        preload: 'auto', // 自动加载
        errorDisplay: true, // 错误展示
        width: 475, // 宽
        height: 300,
        flash: {
          swf: '/video-js.swf',
        sources: [
            src: url,
            type: 'rtmp/flv',
      const videoPlayer = videojs(videoNode, videoJsOptions);
      setPlayer(videoPlayer);
  }, [videoNode]);
  useEffect(() => {
    return (() => {
      if (player) player.dispose()
  }, [visible])
  const onPlayerClose = () => {
    console.log(1);
    onClose()
  return (
      <Modal
        visible={visible}
        title="预览"
        onOk={onPlayerClose}
        onCancel={onPlayerClose}




    

        maskClosable={false}
        <video
          ref={(node) => {
            setVideoNode(node);
          id="videoPlay"
          className="video-js vjs-default-skin vjs-big-play-centered"
          width="100%"
          height="100%"
          <track kind="captions" />
          <p className="vjs-no-js">您的浏览器不支持HTML5，请升级浏览器。</p>
        </video>
      </Modal>
export default playerModal;
效果（弹框）
 
关闭弹框后报错！ 
this.el_.vjs_getProperty is not a function 
主要是会一直报错，然后达到一定次数页面就崩了 
1、弹框没了的时候要销毁dispose，我这里放在useEffect中应该是没生效或者说不能解决吧 
2、还要配合Modal的销毁子节点api：destroyOnClose 
const onPlayerClose = () => {
    onClose()
	// 修改处
    setTimeout(()=>{
      if(player) player.dispose()
    },800)
  return (
      <Modal
        visible={visible}
        title="预览"
        onOk={onPlayerClose}
        onCancel={onPlayerClose}
        maskClosable={false}
		// 修改处
        destroyOnClose
        <video
          ref={(node) => {
            setVideoNode(node);
          id="videoPlay"
          className="video-js vjs-default-skin vjs-big-play-centered"
          width="100%"
          height="100%"
          <track kind="captions" />
          <p className="vjs-no-js">您的浏览器不支持HTML5，请升级浏览器。</p>
        </video>
      </Modal>
现在点击隐藏弹框也会出现报错，主要是我用了定时器销毁，如果不用定时器销毁的话，会有一定的视觉差。但是销毁之后就不会再报错了！ 
最后还是觉得这个报错不太爽，我就自己去改了一下源码，然后发布在gitee上，想用的话可以这样做 
package.js 
"video.js": "git+https://gitee.com/jx915/video.js.git"
或者（使用这个库的话后续代码记得修改一下引用库名称） 
yarn add @ly-utils/video.js -D
playerModal.tsx 
import React, { useState, useEffect } from 'react';
import videojs from 'video.js';
//样式文件注意要加上
import 'video.js/dist/video-js.css';
import { Modal } from 'antd';
const url = 'rtmp://58.200.131.2:1935/livetv/hunantv';
const playerModal: React.FC<any> = (props) => {
  const { visible, onClose } = props;
  const [videoNode, setVideoNode] = useState<any>();
  useEffect(() => {
    if (videoNode) {
      const videoJsOptions = {
        autoplay: true, // 自动播放
        language: 'zh-CN',
        preload: 'auto', // 自动加载
        errorDisplay: true, // 错误展示
        width: 475, // 宽
        height: 300,
        flash: {
          swf: '/video-js.swf',
        sources: [
            src: url,
            type: 'rtmp/flv', // 类型可加可不加，目前未看到影响
      videojs(videoNode, videoJsOptions)
  }, [videoNode])
  const onPlayerClose = () => {
    onClose()
  return (
      <Modal
        visible={visible}
        title="预览"
        onOk={onPlayerClose}
        onCancel={onPlayerClose}
        maskClosable={false}
        destroyOnClose
        <video
          ref={(node) => {
            setVideoNode(node);
          id="videoPlay"
          className="video-js vjs-default-skin vjs-big-play-centered"
          width="100%"
          height="100%"
          <track kind="captions" />
          <p className="vjs-no-js">您的浏览器不支持HTML5，请升级浏览器。</p>
        </video>
      </Modal>
export default playerModal;
                    video.js在6版本之后是和flash分开的，如果需要使用高版本的，需要额外安装videojs-flash准备项目有播放rtmp视频流的功能需求，所以搞来搞去还是想着用video.js这个库。基于react,video.js@5.18.4yarn add video.js@5.18.4 @types/video.js文档：video.js页面中使用页面中使用挺简单的import React, { useMemo, useState, useEffect } from 'react'.
npm start
 确保有可以转换的东西。 将视频文件放入后端的“视频”文件夹中。 如果没有“视频”文件夹，请创建一个。 因此，“视频”文件夹应位于后端/视频中。 您的视频应位于backend / videos / video.mp4中
React Router用例
如果您使用的是React Router并且您的路由器基本名称不是'/'并且类似于<Router basename = '/main'> ，这就是您的工作。
axios . get ( "/main/video" ) . then ( res => {
HLS（HTTP Live Streaming）苹果公司提出的流媒体协议，直接把流媒体切片成一段段，信息保存到m3u列表文件中，
可以将不同速率的版本切成相应的片；播放器可以直接使用http协议请求流数据,可以在不同速率的版本间自由切换，实现无缝播放；省去使用其他协议的烦恼。缺点是延迟大小受切片大小影响，不适合直播，适合视频点播。
RTSP（Real-Ti...
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VideoDome</title>
import React from "react";
import "video.js/dist/video-js.css";
import "videojs-flash";
import videojs from "video.js";
class Video extends React.Component {
				之前因为要实现视频的自动播放，就先做了一个原生的视频自动播放demo，但是真的想要在实际的项目中实现起来就步步是坑。坑，我已经踩过了，在这里分享一下react在移动端中如何实现视频的自动播放。
这个项目是react结合Ios和Android实现的一个APP，应甲方爸爸的要求，实现一个朋友圈内视频的自动播放。大概就是这个样式。
当拿到需求的时候第一反应应该就是去百度了吧。网上有很...
$ yarn add intro.js-react
 确保已安装 ＆ Intro.js （它们是对等依赖项），并且Intro.js CSS定义已正确加载到您的项目中。
 通常如下所示：
 import 'intro.js/introjs.css' ;
两个组件可用于步骤和提示：
 import { Steps , Hints } from 'intro.js-react' ;
注意：在此包装器中，步骤索引始终从0开始，而不是Intro.js中的1。
 基本示例：
 < Steps
        <title>videoJs</title>
     <link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />
      <!-- If yo.
使用准备ffmpeg运行rtsp2web前端代码课外知识
我之前研究在 web 中直接播放 rtsp 视频流时，写过一篇文章：【前端】rtsp 与 rtmp 视频流的播放方法。阅读这篇文章对你的学习有很大帮助。在文章中我有过详细的分析和解读，给出了结论：要想在 web 中实时播放 rtsp 视频流：借助后端转码推流将是必要的操作。
我用 node.js 实现了转码推流的功能，并将其打包成 rtsp2web 发布到了 npm 上。......
      const blob = new Blob([res]);
      let link = document.createElement("a"); // 创建下载的实体标签
      link.href = URL.createObjectURL(blob); // 创建下载的链接
      link.download = "设备填写模板" + ".xlsx"; // 下载的文件名
      link.click(); // 执行下载
      URL.revokeObjectURL(link.href); // 下载完成释放掉blob对象
[/code]
                百度地图API（一）鼠标测面积（完整）
                    拎只菜鸟: 
                    我也遇到了这个问题，请问您解决了吗
                百度地图API（一）鼠标测面积（完整）
                    拎只菜鸟: 
                    我也是。。怎么解决呀
                antd4.0中Form使用initialValue
                    星辰樱与茉: 
                    能不能给我讲解一下（初学者不太会）