Play Live Photos on the web.
- LivePhotosKit JS 1.0.0+
Use the LivePhotosKit JS library to play Live Photos on your web pages.
Before You Begin
1. Embed LivePhotosKit JS in your webpage.
Use the script tag and link to Apple’s hosted version of LivePhotosKit JS at https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js
To enable strict mode for an entire script, put
use strict before any other statements.
By including the LivePhotosKit JS script on your page, you can create players by simply adding declarative markup to your HTML. As the page loads, LivePhotosKit JS will determine what player instances are on the page and initialize them. You can use any HTML tag that supports child nodes.
At minimum, each tag requires the
data-live-photo attribute as well as a non-zero height and width. Doing this allows LivePhotosKit JS to find the DOM elements to be initialized as players.
Then you can specify the locations of the photo and video components by setting the
data-video-src attributes, respectively.
Optionally, you can use the following additional data attributes:
data-photo-time: The timestamp from the beginning of the provided video component, at which the still photo was captured.
data-proactively-loads-video: Whether or not the Player will download the bytes at the provided data-video-src prior to the user or developer attempting to begin playback.
data-shows-native-controls: Whether or not the playback controls are enabled for the user.
Each DOM element assigned to be a Player will be decorated with a playback control.
Create a new
Live by invoking it either as a wrapper around a pre-existing DOM element, or by calling it without an argument, which will create a new DOM element.
After a Player is created, use the properties and methods to set it up and use it, just as you would with a native image or video element.
The player will emit these events:
canplay when the Player has obtained just enough video frames and is obtaining them quickly enough for smooth playback.
error when loading of either the photo or video components of the Live Photo has failed.
ended when playback of the Live Photo has completed.
videoload when the video component of the Live Photo has finished loading.
photoload when the photo component of the Live Photo has finished loading.
A Player will emit error events, if and when errors occur while attempting to load or play. If a Player does experience an error, it will also publish the error to its public property
errors as a way to convey whether or not it is in an error state, and, if so, what the errors were.
The error states can be seen here
The LivePhotosKit JS player is supported on the following browsers:
Safari, Chrome, Firefox
Android (performance depends on device)
Chrome, Firefox, Edge, Internet Explorer 11
How to obtain Live Photo assets
Live Photos consist of two components: a still photo and a video of the moments just before and after the photo is taken. Using one of the following methods will let you obtain the still photo as a JPG and the video as a MOV file.
A sample project is also available.
Using macOS Photos
• Connect your iOS device to your Mac.
• Import your photos into the Photos application.
• Select the Live Photo you wish to export.
• Use File > Export > Export Unmodified Original to export to your file system.
Using macOS Image Capture
• Connect your iOS device to your Mac.
• Select the Live Photo you wish to import from your device to your local file system.
• Choose the destination folder and click on Import.
Using Windows 10 File Explorer
• Ensure that iTunes for Windows is installed. You can download it from here: http://www.apple.com/itunes/download/
• Open File Explorer. This can be opened by pressing the Windows Key and E at the same time.
• Connect your iOS device to your PC.
• You should see your iOS device in the "This PC" folder.
• Navigate to the following folder: (your device) > Internal Storage > DCIM and look for the Live Photo you wish to import.
• Your Live Photo will be stored as a pair of files: a JPG file and a MOV file.
• Drag the pair of files to your local file system.