📽️

[vue-youtube] YouTubeIFramePlayerAPIのVue用ラッパーを使ってみる。

2020/10/06に公開

JavaScript

YouTubeをVue.jsから操作するならコレ！vue-youtubeを使ってみる。

こんにちは、初のZenn記事になります。
今回は、YouTubeIFramePlayerAPIのラッパーである、vue-youtubeの使い方を説明していきたいと思います。
尚、今回の記事の内容は2020年10月6日現在のものになります。バージョン等の影響で記事と同じ動作をしないこともありますので、その際は公式ページをご覧ください。

そもそもYouTubeIFramePlayerAPIって？

YouTubeIFramePlayerAPI（以下YIPA）とは、YouTubeのiFramePlayerの操作や情報の取得ができるAPIです。
iFramePlayerは、以下のようにiframeタグを用いて埋め込んだプレイヤーのことを指します。

この埋め込んだ動画に対して、

再生・停止
音量の変更
早送り・巻き戻し
等の操作ができるのが、YIPAです。

vue-youtubeの特徴

まず前提として、基本的にYIPAの関数は使用可能です。
そのため、どのようなことができるかに関してはYIPAのドキュメントを見ると早いかと思います。
どの関数もPromiseで、プレーヤーが読み込みを完了し、APIの呼び出しを受信するようになるまで待機します。

インストール

npm

npm install vue-youtube

yarn

yarn add vue-youtube

使用方法

バンドラ（Webpack,Rollup）の場合

import Vue from 'vue'
import VueYoutube from 'vue-youtube'
 
Vue.use(VueYoutube)

ブラウザ

<script src="vue-youtube/dist/vue-youtube.js"></script>

動画を埋め込んでみる

さて、それではまずは簡単に動画を埋め込んでみます。

HTML部分

    <youtube :video-id="videoId" ref="youtube" @playing="playingVideo"></youtube>
    <div>
      <button @click="pauseVideo" v-if="playing">pause</button>
      <button @click="playVideo" v-else>play</button>
    </div>

JavaScript部分

    import Vue from 'vue'
    import VueYoutube from 'vue-youtube'

    Vue.use(VueYoutube)
    
    export default {
        data(){
            return{
                videoId: 'lG0Ys-2d4MA',
                playing: false,
            }
        },
        methods:{
            playVideo(){  // 再生処理
                this.player.playVideo()
                this.playing = true
            },
            pauseVideo(){ // 停止処理
                this.player.pauseVideo()
                this.playing = false
            },
            playingVideo(){
                console.log('play start!')
            }
        },
        computed:{
            player(){
                return this.$refs.youtube.player
            }
        }
    }

すると、以下の画像のように表示されるかと思います。
実装後の状態
ボタンの部分は停止中に play（再生）、再生中に pause（停止）に切り替わるようになっています。
動画自体はドキュメントと同じものを使用しましたが、VueConf2017の動画みたいですね。

解説

要点のみ解説します。

動画の埋め込み部分

<youtube :video-id="videoId" ref="youtube" @playing="playingVideo"></youtube>

video-idには動画のIDが入ります。YouTubeでの動画のリンクが以下だったとします。

この時の、v=に続く部分、上のURLでのlG0Ys-2d4MAが動画のURL部分です。
また、@playing=""には再生開始時に実行する関数を指定します。ここでの再生開始時は、再生ボタンを押したタイミングではなく、読み込みが完了し、動画が再生された場合を指します。

再生・停止処理

再生・停止はそれぞれ以下の通り。
再生

this.player.playVideo()

停止

this.player.pauseVideo()

至ってシンプルですね。

動画情報の取得

続いて、動画の操作ではなく、情報を取得します。

動画全体の長さの取得

this.player.getDuration().then((duration) => {
	console.log(duration)
})

シークバーを自前で作るときやプレイリストを作りたい時などに使えますね！
但し、注意点があります。Vue.jsのライフサイクルのbeforeMountの時点でvideo-id属性が確定している場合のみ、mounted以降で長さを取得可能という点です。
例えば、「mounted時にデータベースにアクセスして、取得したvideo-idを指定する」という場合、直後に上の処理を実行した場合、 0 が返ってきます。
その場合は、再生処理後、動画が読み込みが完了してからやっと正確な時間が取得可能になります。

尚、取得できる値の単位は秒、小数点以下3桁（ミリ秒）までが取得できますが、動画の再生処理前に取得できる秒数は小数点以下を四捨五入した整数値のみになります。

再生中の動画の現在位置を取得

this.player.getCurrentTime().then((time) => {
	console.log('time:' + time)
});

こちらも同じく秒数を取得でき、小数点以下16桁までの値を取得できます。

props

公式ページに書いてあるpropsは以下の通り

Prop	型	初期値	説明
width	Number, String	640	iframeの幅（単位：px）
height	Number, String	360	iframeの高さ（単位：px）
resize	Boolean	false	iframeの幅に比例して高さも調整
resizeDelay	Number	200	iframeのリサイズ時のDelay（単位：ms）
fitParent	Boolean	false	親要素のサイズに合わせる
利用例は以下の通り。

<youtube :video-id="videoId" :width="800" height="500" ref="youtube"@playing="playingVideo"></youtube>

この辺りはそのままなので、細かい説明は割愛します。

他にもpropsが…

YIPAではパラメータを渡すことで、自動再生や字幕、UIの色などの変更が可能なのですが、vue-youtubeでは対応しているという表記がありません。念のため、公式リポジトリのコードを読んでみたところ、以下のpropsも見つけました。

Prop	型	初期値	説明
playerVars	Object	{}	プレイヤーの設定
nocookie	Boolean	false	Cookieのオン・オフ

playerVarsでパラメータの設定

nocookieは今回置いといて私が使いたかった機能、playerVarsについて説明します。
まず、YIPAで対応しているパラメータを全て挙げるとキリがないので、詳しくはYIPAの公式ドキュメントをご覧ください。
代表的なものを挙げると以下のようなものがあります。

パラメータ	型	初期値	説明
autoplay	number	0	0：再生ボタンで開始　1：自動再生
color	string	red	プレーヤーのUIの色を変更できます。redで通常の赤、whiteで白色に変更できます。
controls	number	1	0：プレーヤーのUIを非表示　1：プレーヤーのUIを表示
disablekb	number	0	0：キーボードによる操作を有効　1：キーボードによる操作を無効
end	number		動画を特定の位置で停止させる場合にその秒数を正の整数で指定
尚、設定は以下のように記述することで可能です。

HTML側

<youtube :video-id="videoId" ref="youtube" :playerVars="playerVars"></youtube>

JS側

export default {
        data(){
            return{
                videoId: SiAuAJBZuGs,
                playerVars:{
                    autoplay: 1,
                    color: 'white',
                    controls: 1,
                    iv_load_policy: 3,
                }
            }
        },
    }

パラメータはYouTubeのアップデートにより対応しなくなることがありますので、動作しない場合は念のためドキュメントもご覧ください。

最後に

YIPAを使ったサービスを個人開発していたため、メモとして記事を書き始めました。
元々、通常のYIPAを利用していたのですがVueへの移行に合わせて、このnpmを発見し利用しました。対応していないと思っていた機能もしっかりと対応しており、かなり使い勝手が良く安心しました。
サービスのリリース後には改めて、サービスの紹介もしたいと思います！

参考

vue-youtube - npm
IFrame Player API - YouTube
anteriovieira/vue-youtube - GitHub

今回のブログ曲

私の書いているMakerBlogの恒例なので、こちらでも書きます！
今回投稿中に聴いていた曲はこちら

先日、TENETを見に行ってきましたが、最高でした。
1回で全体像は理解できたのですが、時間が経ってからも色々頭の中を考察が巡って、ずっと楽しめる作品だと思いました。話が複雑ではあると思うので、多少人を選ぶ部分もありますが、私としては素晴らしい作品だったと評価します！