reat中使用videojs

直播组件

import React, { Component } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.min.css';
import "./live.less";
var ActiveXObject=window.ActiveXObject;
class Live extends Component {
    constructor(props){
        super(props);
    }
    componentDidMount() {
        //判断浏览器是否有flash插件
        var isIE=false;
        if(window.ActiveXObject){
            isIE=true;
        }
        var has_flash=false;
        try{
            if(isIE){
                var flash=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
                has_flash=true;
            }else{
                var flash=navigator.plugins["Shockwave Flash"];
                if(flash){
                    has_flash=true;
                }
            }
        }catch (e) {
            console.log(e);
        }
        if(has_flash){
            var _this=this;
            //在局域网不能播放，添加的代码，引入的路径必须是用require引入(使用本地的swf或者                    
               node_modules里面的都是可以的)，不是局域网的就不用写这行代码，
           videojs.options.flash.swf = require('videojs-swf/dist/video-js.swf');
           // videojs.options.flash.swf = require("本地地址路径");
            this.player = videojs(this.videoNode, {
                preload: 'auto',// 预加载
                bigPlayButton: {},// 大按钮
                controls: true,// 是否开启控制栏
                width: 850,// 播放器宽度
                height: 600,// 播放器高度
                playbackRates: [1, 1.5, 2],
                muted: true, //是否静音
                loop : false, //是否循环播放
                autoplay:true, //是否自动播放
                techOrder: ["flash"],//设置flash播放
                language: "zh-CN",
            }, function onPlayerReady() {
                if(_this.props.videostreaming){
                    this.src({
                        src: "直播地址”,
                        type:'rtmp/flv'
                    })
                }
            });
        }
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose();
        }
    }
    render() {
        return(
            <div data-vjs-player>
                <video ref={ node => this.videoNode = node } className="video-js vjs-big-play-centered" id="myvideo" poster={flash}></video>
            </div>
        );
    }
}
export default Live;

 在局域网不能播放，添加的代码，引入的路径必须是用require引入(使用本地的swf或者node_modules里面的都是可以的)，不是局域网的就不用写这行代码，
           videojs.options.flash.swf = require('videojs-swf/dist/video-js.swf');

我使用的是video.js@5.8.2版本，之前使用的是video.js@5.20.4，这个版本静音和播放放大直播画面，鼠标放上去显示英文，video.js@5.8.2是没有的，看自己的需求了