iPhone 6s以降で使える、“動く写真”の「Live Photos」。
これまでは、撮影しても公開する場が限定されていましたが、AppleがJavaScript APIの「LivePhotosKit JS」の提供を開始したことで、個人のブログやWebページにも「Live Photos」写真を埋め込むことができるようになっています。
導入方法は、CDNとして提供されている「livephotoskit.js」をヘッダーで読み込んで、タグで画像ファイルと動画ファイルを埋め込みます。埋め込まれた画像ファイルに表示されたLIVEの文字にマウスカーソルを持っていくと、動画ファイルに切り替わり再生が始まる仕組みになっています。
かつてあった「Vine」と比べると、ちょっと使いにくいと感じるかも？
Live Photosの保存方法
アップするためにはまずローカルに保存する必要がありますが、iOSデバイスで撮影された「Live Photos」写真を保存するには、Macの「写真」か「イメージキャプチャ」、Windows 10では「エクスプローラー」を使用すればOK。
つまり普通の画像や動画と扱いは同じです。
画像ファイルはjpgで、動画ファイルはmov形式で保存されます。
LivePhotosKit JSに対応するブラウザ
この方法で埋め込まれた「Live Photos」の再生に対応しているブラウザは、以下の通りです。
- iOS：Safari / Chrome
- macOS：Safari / Chrome / Firefox
- Android：Chrome
- Windows：Chrome / Firefox / Edge / Internet Explorer 11
サンプルコード
<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="https://..."
data-video-src="https://...">
</div>
</body>
- Source LivePhotosKit JS | Apple
- Source livephotoskit
