React 使用 Video.js 加载 HLS视频流

加载依赖

npm install --save video.js

封装组件

说明: 这里sources可以传入多个视频源，type可以自己指定根据播放流来进行选择。因为需求我是一个一个视频单独加载出来的。

VideoPlayer.js

import React from 'react';
import videojs from 'video.js';
import './myVideo.css';

export default class VideoPlayer extends React.Component {
    componentDidMount() {
        this.props = {
            autoplay: true,
            controls: true,
            sources: [{
                src: this.props.src,
                type: 'application/x-mpegURL'
            }]
        };
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
            console.log('onPlayerReady', this);
        });
        this.player.play();
    }
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose();
        }
    }
    render() {
        return (
            <div>
                <div data-vjs-player>
                    <video ref={ node => this.videoNode = node } className="video-js vjs-default-skin video" autoplay="autoplay"></video>
                </div>
            </div>
        );
    }
}

myVideo.css

.video{
    width: 25%;
    float: left;
}
.BigVideo{
    width: 100%;
    height: 500px;
}

组件使用

这里主要写的是使用方法

import VideoPlayer from 'component/VideoPlayer/VideoPlayer';
import 'video.js/dist/video-js.min.css';
render() {
	return (
		<VideoPlayer src={this.state.videoUrl} ></VideoPlayer>
	);
}

原文章