videoJS播放rtmp实时视频失败报错

Question

问题描述

使用video.js播放rtmp视频失败报错

问题出现的环境背景及自己尝试过哪些方法

• 浏览器已允许开启flash

相关代码

import React, { Component } from 'react';
import videojs from 'video.js';
import isEqual from 'lodash/isEqual';

import 'video.js/dist/video-js.css';

export default class VideoPlayer extends Component {
    componentDidMount() {
        this.createVideo();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.sources[0].src === '') {
            if (this.player) this.player.dispose();
        } else if (!isEqual(this.props.sources, nextProps.sources)) {
            if (this.player) {
                this.player.src(nextProps.sources);
                this.player.load()
            }
        }
    }

    componentWillUnmount() {
        if (this.player) {
            this.player.dispose();
        }
    }

    createVideo = () => {
        this.player = videojs(this.videoNode, {
            ...this.props,
            techOrder: ["html5", "flash", "other supported tech"]
        }, function onPlayerReady() {
            const media = this;
            console.log("---成功初始化视频---", media);
        });
    }

    render() {
        return (
            <div
                style={{
                    width: '100%',
                    height: '100%',
                    textAlign: 'center'
                }}
            >
                <div data-vjs-player style={{ margin: '0 auto', height: '100%', padding: 0 }}>
                    <video
                        ref={node => this.videoNode = node}
                        className="video-js vjs-fluid vjs-default-skin vjs-big-play-centered"
                    >
                    </video>
                </div>
            </div>
        )
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

期望看到视频正常播放

实际报错

Answer 1

你好，你的问题解决了吗。我也是这个问题

Answer 2

你需要的是 videojs-flash