iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0

今天來簡介 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


上一篇
Day23 西瓜播放器
下一篇
Day25 react-player
系列文
前端影片與直播筆記30

尚未有邦友留言

立即登入留言