video.js在react中的使用

引入依赖和video.js：

import videojs from "video.js";

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

import bgMp4 from "./bg.mp4";                   //引入视频

方法1：

挂载自动播放卸载摧毁：

componentDidMount() {

        // instantiate Video.js

        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {

            // this.preload = true;

            console.log("onPlayerReady", this);

        });

        this.player.play();

    }

    // destroy player on unmount

    componentWillUnmount() {

        if (this.player) {

            this.player.dispose();

        }

    }

使用：

 <video controls width="369" height="207" ref={(node) => (this.videoNode = node)} className="video-js">

                            <source src={bgMp4} type="video/mp4"></source>

                        </video>

方法2：

挂载自动播放卸载摧毁：

 componentWillUnmount() {

        if (this.player) {

            this.player.dispose();

        }

    }

    componentDidMount() {

        let options = {

            controls: true，

        };

        this.player = videojs("myVideo", options, function onPlayerReady() {

            // In this context, `this` is the player that was created by Video.js.

            // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player

        });

        this.player.play();

    }

使用：

 <video-js id="myVideo" controls width="369" height="208">

                            <source src={bgMp4} type="video/mp4"></source>

                        </video-js>