今天來簡介 react-player

react-player 是一款強大的 React 播放器元件，雖然名子冠上了「react」-player，但不使用 react 也可以使用此播放器，它的特色有：

1. github 星星 1735 顆
2. 可播放 YouTube、SoundCloud、Facebook、Vimeo、Twitch...等等媒體影片
3. 可播放多種格式、協議影片
4. 不使用 React 也可使用此一播放器

可以玩玩看官方的DEMO

安裝

沒有看到官方的 CDN 連結，這裡一樣用 Node.js 當例子

NPM

npm install react-player --save

快速入門：建立 react-player

這裡以 react-create-app 為環境，以 youtube 影片為例子

import React, { Component } from 'react';
import ReactPlayer from 'react-player';

class App extends Component {
  render() {
    return (
      <ReactPlayer url='https://www.youtube.com/watch?v=HgzGwKwLmgM' playing />
    );
  }
}

export default App;

至此便建立完成

Props

這裡列出幾個常見的props屬性和可傳入值

例如：自動播放、聲音大小 0.8 左右、寬度 800px、高度 450px 的播放器

class App extends Component {
  render() {
    return (
      <ReactPlayer 
        url='https://www.youtube.com/watch?v=HgzGwKwLmgM'
        playing={true}
        volume={0.8}
        width="800px"
        heght="450px"
      />
    );
  }
}

其他props屬性或事件可參考官方文件
　
　
　
　
　
　

參考

官方github