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

逃离我推掉我的手 2023-03-05 03:27 18阅读 0赞

#### 加载依赖 ####

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>
    	);
    }

[原文章][Link 1]

[Link 1]: https://blog.csdn.net/qq_25040155/article/details/94608778