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

这是一个普遍的问题，我需要你的专家意见。如何在reactjs中播放mp4和hls视频？

我是一个新的蜜蜂在Reactjs，我有一个要求，我想用reactjs播放HLS和MP4视频。我有一个直播和录制的网址可以播放。

我发现很多选择。我想要一个单独的播放器作为组件创建，并且可以播放hls（.m3u8格式）和mp4视频。

你能否给我一个更好的方法或一些示例教程？

2017-04-05 gitu

反应仍然是JavaScript与html5常用的，我看没有问题，创建视频组件，它将支持播放列表。另外我敢打赌，已经有很多这样的组件。 –

我的npm包无耻推广：https：//www.npmjs.com/package/react-jplayer 虽然它不支持播放列表，但支持这两种格式。演示http://react-jplayer.azurewebsites.net/ –

我使用'videojs'加上hls插件，封装在反应组件中。适用于mp4和hls播放列表，适应性流媒体等。编辑：它可以在ios safari上运行，并且可以与'video'元素上的'playsInline'属性内联播放，这对于免费播放器来说是很难实现的。 – Pandaiolo

VideoJS是一个全功能HLS播放器，效果很好，而且

工程在iOS的Safari浏览器
支持playsInline道具，以避免在iOS美孚设备

注全屏：您也可以在iOS上使用自动播放，只要视频开始静音

首先，你需要添加依赖关系videojs和HLS插件，在您主HTML，像解释in the docs of videojs HLS plugin

然后，您可以使用像下面反应包装，修改自己的口味：

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

全部Video.js的选项和文档与播放器的所有自定义和功能can be found here

来源

2017-04-05 13:59:33 Pandaiolo

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

回答

相关问题