こんにちは。エンジニアの筒井です。
家にこもってYouTubeばかり見ています。

前回の記事でも取り上げたkrpanoにはデフォルトでいくつかのプラグインが実装されています。
今回はその中から、Videoplayer Pluginというプラグインについて紹介します。

Videoplayer Pluginの使い方

パノラマ内に動画を設置する時、いくつか方法がありますが、今回はlayer要素として設置します。
layer要素にすると角度をつけることができません。
角度をつけたい場合はhotspot要素にする必要があります。

下記は、公式リファレンスにあるコードです。
参照ページ：https://krpano.com/plugins/videoplayer/#syntax

<layer name="video"
    url.html5="videoplayer.js"
    url.flash="videoplayer.swf"
    videourl="video.m4v|video.webm"
    posterurl="videoposter.jpg"
    align="center" x="0" y="0"
    pausedonstart="false"
    loop="false"
    volume="1.0"
    onvideoready=""
    onvideoplay=""
    onvideopaused=""
    onvideocomplete=""
    onerror=""
/>

実際に動画を読み込んでみるとこのようになります。

実際に私がよく値を変えていた属性について紹介します。

videourl

動画のパスを指定する部分です。
動画の形式については、MPEG4 / H264,WebMなどの他にも使用することができる形式が複数あります。
使用ブラウザなどにより使えない場合があるので一度リファレンスを読んで確認したほうがよいかもしれません。
今回はmp4を使用しました。

pausedonstart

読み込まれた動画が、最初の時点で一時停止した状態かどうかです。
ブーリアン型の属性で、初期値がfalseで設定されています。
初期値のままだと、読み込まれた動画がそのまま再生されるようになります。

loop

動画が繰り返し再生されるかどうかです。
この属性もブーリアン型で、初期値がfalseで設定されています。
初期値のままだと、動画が最後まで再生されると、そのまま停止します。

Plugin Actions

Videoplayer PluginにはPlugin Actionsというものが用意されています。
Plugin Actionsを使うことで、動画の再生や停止をコントロールできるようになります。
こちらも個人的によく使ったものを紹介します。

play()

動画を再生する。
もしくは、一時停止になっている動画の再生を再開をする。

pause()

動画を一時停止する。

togglepause()

動画が再生されていれば一時停止し、一時停止していれば再開する。

stop()

動画を停止して、最初のフレームに戻る。

togglepause()とonclickを使って、クリックしたら動画を一時停止、もう一度クリックしたら再生が始まるようにしてみました。

おわりに

プラグインを使うと、表現できることを増やすことができます。
パノラマだけではなく、日頃使っている技術について理解を深め、表現したいことにより適した手段を選べるように頑張ります。