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 →

Laphs: Apple Live Photos on the Web

live_photo-0

From the folks over at Tumblr:

Add support for Apple’s Live Photos in web browsers.

Install it using npm, or include the dist file:

npm install --save laphs

You can make Laphs work with existing elements:

<img src="STILL-PHOTO.jpg" data-live-photo="LIVE-PHOTO.mov" data-live-photo-still-image-time="1.71"/>

<script>LivePhotos.initialize();</script>

Or, alternatively, directly create new instances:

const livePhoto = new LivePhotos.LivePhoto(el, options);

Laphs: Live Photos on the Web →
Laphs Source (GitHub) →