Live PhotosをWebページに埋め込める「LivePhotosKit JS」CDNで導入簡単

LivePhotosJS

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>

関連するエントリー