今天來簡介 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屬性和可傳入值

屬性 值 描述
url 字串、物件或陣列 影片連結
playing 布林值 是否自動播放。預設 false
loop 布林值 是否循環播放。預設 false
controls 布林值 是否顯示控制條 ( Vimeo、Twitch 會始終顯示 )。預設 false
volume 數值或null 數值0~1。預設null
muted 布林值 是否靜音。預設 false
width 字串 寬度。數值加單位( 例如傳入"600px" )
height 字串 高度。數值加單位( 例如傳入"300px" )

例如：自動播放、聲音大小 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