Apple’s LivePhoto Kit for JavaScript

Apple’s doc: https://developer.apple.com/reference/livephotoskitjs/

Code snippet:

<h1>Live Photo Demo</h1>

<div
  data-live-photo
  data-shows-native-controls
  data-photo-src="https://cdn.makzan.net/IMG_7677.JPG"
  data-video-src="https://cdn.makzan.net/IMG_7677.mov"
  style="width:320px;height:320px;"
>    
  <img src='https://cdn.makzan.net/IMG_7677.JPG' alt='Sample Live Photo in Macao Science Center.'>
</div>

<script src='https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js'></script>

I modified Apple’s example code to include an img tag for accessibility reason.

Note: In my test, the code does not work in Safari and Safari Technical Preview in latest OS 10.12.4.

Note 2: Using CSS to set width and height won’t work. The JS replaces the entire element. So the size has to be inline.

Video preview

The video preview shows the importance to include the <img> tag inside the live-photo div.

Codepen Preview

See the Pen Apple Live Photo Demo by Thomas Seng Hin Mak (@makzan) on CodePen.