react中使用video.js播放rtmp视频流无效

Question

1. 通过接口获取到RTMP的流，想通过video.js实现实时预览.版本为"^5.18.4",在chrome设置的是允许flash插件，但是页面上一直报错：VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. MediaError {code: 4, message: "No compatible source was found for this media."}

2.
`
import React from "react";
import { Message, Button } from "antd";
import Base64 from "base-64";
import { stringify } from "qs";
import videojs from "video.js/dist/video.js";
import "video.js/dist/video-js.css";

videojs.options.flash.swf = require('videojs-swf/dist/video-js.swf');

const ip = "http://*";

class Video extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        token: "", // VMS token
        resourceData: [], // 资源数
        videoFileStream: "rtmp://192.168.131.86:15039/live/1392359546", // 实时视频流地址
        visible: false,
    };
}

componentDidMount() {
    // this.authPremission();
    this.reloadPlayer();
}

componentWillUnmount(){
    const myVideoElem = document.getElementById("myVideo");
    if(myVideoElem.length > 0){
        const player = videojs('myVideo');
        player.dispose();
    }
}

// 视频加载并播放
reloadPlayer = () => {
    const {videoFileStream} = this.state;
    const options = {
        width:"600px",
        height:"400px",
        controls:'controls',
        preload:"auto",
        autoPlay:'autoPlay',
    };
    this.player = videojs('myVideo', options);
    this.player.src({
        src: videoFileStream,
        type:'rtmp/flv',
    });
    this.player.load();
    this.player.play();
}



render() {
    // const { videoFileStream } = this.state;

    return (
        <div>
            <Button
                onClick={() => {
                    this.handlePreview();
                }}
            >
                点击获取流媒体
            </Button>

            <video
                id="myVideo"
                className="video-js vjs-default-skin vjs-big-play-centered"
            >
                 {/* <source */}
                     {/* src="" */}
                     {/* type="rtmp/flv" */}
                 {/* /> */}
                <p className="vjs-no-js">
                    您的浏览器不支持HTML5，请升级浏览器。
                </p>
                <track kind="captions" />
            </video>
        </div>
    );
}

}

export default Video;

`

Answer 1

请问最后问题怎么解决了，分享一下

Answer 2

同楼上问题 后来发现是videojs版本太高不支持flash了，建议下5.19的

Answer 3

要指定flash路径,比如:
vjs.options.flash.swf = "videojs5.18.4/video-js.swf";
然后把video-js.swf这个文件放到指定的路径.

Answer 4

1.将文件放到服务器上，就是别用本地文件的方式打开

2.用的是chrome，将网站的flash设置成默认允许，然后刷新下，就可以了。像这样设置：

Answer 5

可以试试这个https://github.com/videojs/vi...