今天來簡介 video-react

video-react 是一款 React 播放器元件，其 UI、Options 皆受到了 video.js 的啟發。

video.js 之後幾天會介紹

video-react的特色有：

1. Github 945 顆星星
2. 以videojs為啟發建立的播放器元件
3. 播放器介面的彈性、元件化

安裝、引入 video-react

npm

JS的部分，官方網站看起來並無 JS 的 cdn 連結，所以得在Node環境下使用NPM，官方範例 install 是這樣寫：

npm install --save video-react react react-dom

但如果你本地已裝完 react、react-dom，或者是用 create-react-app 的環境開發，那麼就下

npm install --save video-react

就可以了

CSS

CSS的引入方式比較多種

用import的話：

import "~video-react/dist/video-react.css";

或

@import "~video-react/styles/scss/video-react";

CSS也有CDN的方式，直接index.html引入也行

<link rel="stylesheet" href="https://video-react.github.io/assets/video-react.css" />

快速入門：建立 video-react

這裡以 create-react-app 為開發環境，起專案後先刪掉 src 資料夾內不必要的檔案
這裡我只留 App.js 、 index.css 、 index.js ， 然後照安裝說明 install video-react 的 JS 和 CSS。

App.js

import React, { Component } from "react";
import { Player } from "video-react";


class App extends Component {
  render() {
    return (
      <div className="app">
        <Player>
          <source src="http://www.html5videoplayer.net/videos/toystory.mp4" />
        </Player>
      </div>
    );
  }
}

export default App;

打開終端機下

npm start

檢查結果

基本上會占滿整個瀏覽器視窗，至此便快速建立完成。

屬性 Attributes

我們可以從<player>上傳入播放器的 config 設定，例如：
影片太大了，我們想要將他修改成高600px、寬400px、靜音且自動播放的播放器

import React, { Component } from "react";
import { Player } from "video-react";


class App extends Component {
  render() {
    return (
      <div className="app">
        <Player 
          fluid={false}
          width={600}
          height={400}
          muted={true}
          autoPlay={true}
        >
          <source src="http://www.html5videoplayer.net/videos/toystory.mp4" />
        </Player>
      </div>
    );
  }
}

export default App;

見結果

Props可傳入屬性可見此　
　
　

參考

video-react 官方文件
video-react github