Apple Live Photos for JavaScript Developers

In a rather surprising move Apple has released a JavaScript library to play Live Photos on the web on NPM:

Use the LivePhotosKit JS library to play Live Photos on your web pages.

The JavaScript API presents the player in the form of a DOM element, much like an image or video tag, which can be configured with photo and video resources and other options, and have its playback controlled either programmatically by the consuming developer, or via pre-provided controls by the browsing end-user.

Installation is possible per npm i:

npm install --save livephotoskit

import * as LivePhotosKit from 'livephotoskit';

Alternatively you can also use an Apple CDN hosted version, which exposes window.LivePhotosKit:

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

The script automatically seeks out elements with the data-live-photo attribute and tries to augment them, based on the data-photo-src and data-video-src attributes:

<div data-live-photo data-photo-src="https://developer.apple.com/live-photos/assets/boy.jpg", data-video-src="https://developer.apple.com/live-photos/assets/boy.mov"></div>

One can also manually create instances of LivePhotosKit.Player:

// Create the player using a pre-existing DOM element.
const player = LivePhotosKit.Player(document.getElementById('my-live-photo-target-element'));
player.photoSrc = 'https://...';
player.videoSrc = 'https://...';

// Listen to events the player emits.
player.addEventListener('canplay', evt => console.log('player ready', evt));
player.addEventListener('error', evt => console.log('player load error', evt));
player.addEventListener('ended', evt => console.log('player finished playing through', evt));

// Use the playback controls.
player.playbackStyle = LivePhotosKit.PlaybackStyle.HINT;
player.playbackStyle = LivePhotosKit.PlaybackStyle.FULL;
player.play();
player.pause();
player.toggle();
player.stop();

// Seek the animation to one quarter through.
player.currentTime = 0.25 * player.duration;

// Seek the animation to 0.1 seconds into the Live Photo.
player.currentTime = 0.1;

LivePhotosKit JS Documentation →
LivePhotosKit JS on npm →