WebページでLivePhotosを再生する #JavaScript

2017年4月にアップルが、iPhone 7 / 6sなどで撮影できるLive Photos をウェブサイト上で表示可能にするJavaScriptライブラリ「LivePhotosKit JS」を公開しました。

今回は実際にwebページ上でLive Photosを再生する方法を紹介します。

LivePhotosを取り込む

macOSの場合

iOSデバイスをMacに接続
Photosアプリを起動
任意のLivePhotosを選択
「ファイル」->「書き出す」->「○枚の写真の未編集のオリジナルを書き出す...」を選択

これでLivePhotosをPCに取り込むことが可能です。
出力先のディレクトリにJPGとmovファイルが出力されていれば問題ありません。

そのほかの取り込み方法や、WindowsでのLivePhotosの取り込みも可能です。
詳細は、こちら

LivePhotosを再生する

手順は至極簡単で、
1. LivePhotosKit JSを読み込む
2. 要素にdata-live-photo属性とheight、widthを追加
　※注: height、widthを指定しない、もしくは0を指定した場合LivePhotosは再生されません
3. 取り込んだLivePhotosのJPGとmovファイルのロケーションをdata-photo-srcとdata-video-srcに指定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
  </head>
  <body>
    <div
      data-live-photo
      data-photo-src="img/LivePhotos.JPG"
      data-video-src="img/LivePhotos.mov"
      style="width: 320px; height: 320px">            
    </div>
  </body>
</html>

以上、これだけで再生が行えます。
再生が開始されるのは、LIVEボタンをマウスオーバーしたタイミングとなります。

APIを使ってみる

Playerオブジェクト

まずはじめにPlayerオブジェクトを作成する必要があります。
ここでは、既存のDOM要素をPlayerオブジェクトにする方法を紹介します。

// LivePhotosKit.Playerの引数に対象の要素を指定
const player = LivePhotosKit.Player(document.getElementById('my-live-photo-target-element'));

// 取り込んだLivePhotosのJPGとmovファイルのロケーションを以下のように指定
player.photoSrc="img/LivePhotos.jpg";
player.videoSrc="img/LivePhotos.mov";

各種API

作成したPlayerオブジェクトを使用し、LivePhotosを操作することが可能です。
例えば、再生のタイミングを指定する場合は、playメソッドが利用できます。他にもstop、toggleといったメソッドも用意されています。

また、以下のイベントを取得することもできます。

canplay: プレイヤーがスムーズな再生が行える状態のとき
error: LivePhotosを再生するためのJPG、movファイルロードに失敗したとき
ended: LivePhotosの再生が完了したとき
videoload: movファイルのロードが完了したとき
photoload: JPGファイルのロードが完了したとき

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div
      id="my-live-photo-target-element"
      style="width: 320px; height: 320px">
    </div>

    <button id="btn-start">Start</button>
    <button id="btn-pause">Pause</button>
    <button id="btn-stop">Stop</button>
    <button id="btn-toggle">Toggle</button>
  </body>
  <script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
  <script>
    const player = LivePhotosKit.Player(document.getElementById('my-live-photo-target-element'));
    player.photoSrc="img/LivePhotos.jpg";
    player.videoSrc="img/LivePhotos.mov";

    // player can play
    player.addEventListener('canplay', evt => console.log('player ready', evt));

    // player ended
    player.addEventListener('ended', evt => console.log('player finished playing through', evt));

    // Playerのplayメソッドを呼び出すことで、LivePhotosが再生されます
    document.getElementById('btn-start').addEventListener('click', evt => {
      player.play();
    });

    // pauseメソッドを呼び出すことで、再生中のLivePhotosが一時停止します
    document.getElementById('btn-pause').addEventListener('click', evt => {
      player.pause();
    });

    // stopメソッドを呼び出すことで、再生中のLivePhotosが停止します
    // 次回再生時は、途中からではなく始めからの再生となります
    document.getElementById('btn-stop').addEventListener('click', evt => {
      player.stop();
    });

    // toggleメソッドを呼び出すことで、LivePhotosの再生・一時停止を行います
    document.getElementById('btn-toggle').addEventListener('click', evt => {
      player.toggle();
    });
  </script>
</html>

おまけ

Macで簡易サーバーを起動する方法

私は動作確認する際に、pythonのコマンドを実行しローカルサーバーをたてました。
作成したhtmlファイルのあるディレクトリで以下のコマンドをたたくだけで起動が行えます。

python -m SimpleHTTPServer 8888