---
# System prepended metadata

title: ReactPlayer筆記記錄
tags: [react]

---

---
tags: react,
disqus: hackmd
---

###### tags: `react`

# ReactPlayer筆記記錄

這次要在React裡做一個播放器，讓影片可以帶入到播放器裡。

使用的套件叫[react-player](https://www.npmjs.com/package/react-player)。

使用方法其實也很簡單。

先安裝react-player
```
npm install react-player # or yarn add react-player
```

就這樣，你的畫面就會有一個播放器內容是youtube的影片。

```javascript=
import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://youtu.be/v7WNK1EojH0' />
```

![](https://i.imgur.com/XCrTXlw.png)

馬上就可以看到東西，真的是easy to use，讚！

那其實他還有很多功能跟控制選項，因為我本次也用的不多，只用到暫停播放的callback，有興趣可以去我的git看。

[本次git紀錄](https://github.com/hsiaomingcheng/react-youtube-homework)

---

[最後我的成品](https://hsiaomingcheng.github.io/react-youtube-homework/public/#/)