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を再生する
手順は至極簡単で、
- LivePhotosKit JSを読み込む
- 要素に
data-live-photo属性とheight、widthを追加
※注:height、widthを指定しない、もしくは0を指定した場合LivePhotosは再生されません - 取り込んだ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