Use the LivePhotosKit JS library to play Live Photos on your web pages.
Installation is possible per
npm install --save livephotoskit
import * as LivePhotosKit from 'livephotoskit';
Alternatively you can also use an Apple CDN hosted version, which exposes
The script automatically seeks out elements with the
data-live-photo attribute and tries to augment them, based on the
<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
// 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;
// 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 →