如何在reactjs中播放mp4和hls视频？

这是一个一般性问题，我需要你的专家意见

我是Reactjs的新手，我有一个要求，我想用Reactjs播放HLS和mp4视频。我有一个直播和录制的url播放

我找到了很多选择。我想要一个单独的播放器，它将被创建为一个组件，能够播放hls（.m3u8格式）和mp4视频

您能给我推荐一个更好的方法或一些示例教程吗？

是一款功能齐全的HLS播放器，运行非常好，而且

在iOS Safari中工作

支持

playsInline

prop以避免在iOS移动设备上全屏显示

注意：您也可以在iOS上使用autoplay，只要视频开始静音

首先，您需要在主HTML中向videojs和HLS插件添加依赖项，如图所示

然后，您可以使用如下所示的react包装器，根据自己的喜好进行修改：

import React, { PropTypes } from 'react';

export default class VideoPlayer extends Component {
    static propTypes = {
        style: PropTypes.object,
        onVideoEvent: PropTypes.func,
        src: PropTypes.string,
        poster: PropTypes.string
    }

    static defaultProps = {
        style: {},
        onVideoEvent: console.log,
        src: '',
        poster: ''
    }

    componentDidMount = () => {
        // This is a hack because I don't import video.js as a hard dependency
        // but load it alongside my app bundle
        if (typeof videojs === 'undefined') {
            setTimeout(this.componentDidMount, 500);
            return;
        }
        const { onVideoEvent } = this.props;
        this.player = videojs(this.videoNode);
        const exportEvents = ['timeupdate', 'play', 'playing', 'pause',
            'ended', 'error', 'waiting']; 
        exportEvents.forEach(ev => this.player.on(ev, this.props.onVideoEvent));
    }

    componentWillUnmount = () => {
        this.player && this.player.dispose();
        this.player = null;
    }

    render = () => (
        <div alt="snap"
            key="media"
            style={ this.props.style }
            data-vjs-player>

            <video playsInline
                className="video-js"
                preload="auto"
                poster={ this.props.poster }
                ref={ r => { this.videoNode = r; } } >

                <source src={ this.props.src } type="application/x-mpegURL" />

            </video>
        </div>
    )
}

import React，{PropTypes}来自'React'；
导出默认类VideoPlayer扩展组件{
静态类型={
样式：PropTypes.object，
onVideoEvent:PropTypes.func，
src:PropTypes.string，
发信人：PropTypes.string
}
静态defaultProps={
样式：{}，
onVideoEvent:console.log，
src:“”，
海报：''
}
componentDidMount=（）=>{
//这是一个黑客行为，因为我没有将video.js作为硬依赖项导入
//但将其与我的应用程序包一起加载
如果（视频JS的类型===‘未定义’）{
setTimeout（this.componentDidMount，500）；
返回；
}
const{onVideoEvent}=this.props；
this.player=videojs（this.videoNode）；
const exportEvents=[“时间更新”、“播放”、“播放”、“暂停”，
“已结束”、“错误”、“等待”]；
exportEvents.forEach（ev=>this.player.on（ev，this.props.onVideoEvent））；
}
组件将卸载=（）=>{
this.player&&this.player.dispose（）；
this.player=null；
}
渲染=（）=>(
{this.videoNode=r；}}>
)
}

---

Video.js的完整选项和文档以及播放器的所有定制和功能

react仍然是html5常用的javascript，我认为创建支持播放列表的视频组件没有问题。而且我打赌已经有很多这样的组件了。无耻地推广我的npm软件包：这两种格式都受支持，尽管它还不支持播放列表。演示我使用的是

videojs

加上hls插件，封装在react组件中。适用于mp4和hls播放列表、adapive流媒体等。编辑：它适用于ios safari，可以通过

视频
元素上的
playsInline
道具内联播放，这在免费播放器中很难实现。