Includere Apple Live Photos nelle pagine Web

La casa di Cupertino ha recentemente rilasciato un'API JavaScript per l'inclusione delle fotografie animate del servizio Live Photos all'interno delle pagine Web, vediamo ora come sia possibile utilizzare questa nuova interfaccia per lo sviluppo in un nostro progetto attraverso pochi e semplici passaggi.

Tecnicamente la procedura che affronteremo si basa sulla libreria LivePhotosKit, essa si occupa della riproduzione delle Live Photos fornendo un player sotto forma di elemento del DOM (Document Object Model). L'API presenta quindi un comportamento molto simile a quello che che si avrebbe con il ricorso ai tag per le immagini e i video, offrendo diverse opzioni con le quali configurare, programmare e controllare le fasi di playback.

E' possibile invocare la libreria tramite il CDN messo a disposizione da Apple per evitare l'installazione diretta sul proprio ambiente di sviluppo o produzione:

ma in alternativa viene comunque fornita l'opzione che prevede di installare LivePhotosKit tramite package manager npm:

npm install --save livephotoskit

Fatto questo si deve abilitare lo strict mode di JavaScript, ne consegue che se si desidera attivare tale modalità per un intero script sarà necessario far precedere a qualsiasi altra istruzione:

'use strict';

La generazione del player si basa sull'utilizzo di markup dichiarativo nell'HTML, una volta caricata la pagina la libreria intercetterà l'istanza del player inizializzandola; ciò è possibile tramite l'attributo data-live-photo, associato alle dimensioni del player, che permette a LivePhotosKit di identificare gli elementi DOM da inizializzare con player. Gli attributi data-photo-src e data-video-src consentono poi di specificare il percorso alla foto e al video da riprodurre nella Live Photo:

Dal punto di vista dello sviluppo in JavaScript, la libreria prevede che un nuovo player possa essere generato tramite chiamata come wrapper di un elemento DOM preesistente, o tramite una chiamata priva di argomenti, che porterà alla generazione di un nuovo elemento del DOM:

// Player generato da una nuova divbox:
const unNuovoPlayer = LivePhotosKit.Player();
document.body.appendChild(unNuovoPlayer);
// Player generato da un elemento DOM preesistente:
LivePhotosKit.Player(document.getElementById('unElementoEsistente'));

Al player possono essere poi associati i classici controlli per la riproduzione:

player.playbackStyle = LivePhotosKit.PlaybackStyle.HINT;
player.playbackStyle = LivePhotosKit.PlaybackStyle.FULL;
player.play();
player.pause();
player.toggle();
player.stop();

Per approfondire: LivePhotosKit JS