YouTube IFrame Player APIをゆるふわにラッピングしてみた。

# shuvi-lib
フレームレスなYouTubeプレイヤー「[Shuvi](https://github.com/yuki540net/Shuvi)」を作った際にYouTube IFrame Player APIを使ったのですが、もうちょっと使いやすくならないかなと思い、自分でゆるふわにラッピングしてみました。

名前は、「shuvi-lib」です。
![shuvi-lib.jpg](https://qiita-image-store.s3.amazonaws.com/0/77608/e90f72d6-31c7-f8ee-ff2e-cd88ac293f82.jpeg)



ちなみにShuviは、β版ではありますが公開中です。

![shuvi.png](https://qiita-image-store.s3.amazonaws.com/0/77608/3ecd9c4d-3cf5-d2ba-8018-9105cceb9027.png)



- Shuviについての紹介ページ
  - [Qiita - ElectronでフレームレスなYouTubeプレイヤーを作ってみた](http://qiita.com/yuki540/items/af0f909b2256a9c80e6c)
- Shuviのダウンロード
  - [GitHub - Releases](https://github.com/yuki540net/Shuvi/releases/tag/v0.0.1)

## shuvi-libをプロジェクトへの取り込み
shuvi-libの使う方法はいくつかあります。

一つ目は、[GitHubページ](https://github.com/yuki540net/shuvi-lib)からダウンロードして自分のプロジェクトに置き、使う方法。

二つ目は、shuvi-libはnpm上で公開されているので、

```
npm install shuvi-lib
```

のようにnpmコマンドを使ってプロジェクトに取り込む方法。

三つ目は、私のサーバー経由でネットワーク越しにshuvi-libをプロジェクトに取り込む方法です。

```javascript
<script src="http://api.yuki540.com/shuvi-lib/v1/shuvi.lib.js"></script>
```

## 使い方
shuvi-libを使えば、YouTube IFrame Player APIをより簡単に操作することが可能です。

shuvi.lib.jsを取り込み、下記のようにパラメータを渡し、newすれば、すぐにプレイヤーの操作が可能になります。

```javascript
let shuvi = new Shuvi({
  video_id : ['fQN2WC_Acpg'], // 動画IDの入った配列
  id       : 'player',        // 要素のID
  width    : 500,             // 画面の幅
  height   : 300,             // 画面の高さ
  autoplay : ture             // [option]自動再生（デフォルトは、true）
  loop     : false            // [option]ループ（デフォルトは、false）
})
```

npm経由の方は、requireを忘れずに。
```javascript
const Shuvi = require('shuvi-lib')
```

ここから先は、Methods・Eventsのリファレンスです。

## Methods
shuvi-libは、できるだけシンプルでわかりやすいメソッド名にしています。

#### 動画URLから動画IDの取得
video_id = getId(url)

- [param]url: YouTubeの動画URL
- [return]video_id: 動画ID

#### イベントリスナの追加
shuvi.on(event, fn)

- [param]event: イベント名
- [param]fn: コールバック関数

#### プレイリストの変更
shuvi.setPlaylist(playlist)

- [param]playlist: 動画IDの入った配列

#### 再生
shuvi.play()

#### 停止
shuvi.pause()

#### 次の動画へ
shuvi.next()

#### 後ろの動画へ
shuvi.back()

#### プレイリスト内の指定の動画を選択
shuvi.select(num)

- [param]num: プレイリストの番号

#### ループの有無
shuvi.loop(bool)

- [param]bool: trueの場合、ループ有。falseの場合、ループ無。

デフォルトは、ループ無です。

#### 再生位置の移動
shuvi.seek(per)

- [param]per: 0~1の数値

#### 動画の総時間
duration = shuvi.duration()

- [return]duration: 動画の総時間

#### 現在の再生時間
current = shuvi.current()

- [return]current: 現在の再生時間

#### 動画の読み込み状況
buffer = shuvi.buffer()

- [return]buffer: 動画の読み込み具合（0~1）

#### 音量の取得
volume = getVolume()

- [return]volume: 0~1の値

#### 音量の設定
shuvi.setVolume(volume)

- [param]volume: 0~1の値

#### サイズの変更
shuvi.resize(width, height)

- [param]width: 画面の幅
- [param]height: 画面の高さ

## Events
shuvi-libは、プレイヤーの動作ごと挙動をイベントとして呼び出されます。

- load
  - 動画の起動読み込み終了時に呼び出されます。
- error
  - 動画の読み込み・再生の失敗時に呼び出されます。
- change
  - 動画の変更時に呼び出されます。
  - 初回の動画の時には、発火されません。
- play
  - 動画再生時に呼び出されます。
- pause
  - 動作停止時に呼び出されます。
- seek
  - 動画の再生時間が変更されるたびに呼び出されます。
- end
  - 動画の再生が終了時に呼び出されます。

# おわりに
ぱぱっと書いたものなので、ライブラリとしては物足りない感はありますが、今後、Shuviに取り込む際にアップデートして行こうと思います。
よければ、Starください。

- shuvi-libのリポジトリ
  - [GitHub - shuvi-lib](https://github.com/yuki540net/shuvi-lib)
- shuvi-libに関するブログ
  - [はてなブログ - YouTube IFrame Player APIをゆるふわにラッピングしてみた。](http://yuki540.hatenablog.jp/entry/2017/05/15/YouTube_IFrame_Player_API%E3%82%92%E3%82%86%E3%82%8B%E3%81%B5%E3%82%8F%E3%81%AB%E3%83%A9%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E3%80%82)
- 開発者
  - yuki540
  - [Twitter - @eriri_jp](https://twitter.com/eriri_jp)
  - [HP - yuki540.com](http://yuki540.com)