LivePhotosKit JS: Live Photos weergeven op een webpagina
Sinds de komst van de iPhone 6s is het mogelijk om Live Photos te maken. Deze bewegende foto's van 3 seconden zijn in werkelijkheid een video bestand en een 'cover' foto. Wanneer je een Live Photo wilt weergeven op een webpagina dan is dat niet zomaar mogelijk, je dient dan gebruik te maken van LivePhotosKit.
Met behulp van een LivePhotosKit JS kun je Live Photos op redelijk eenvoudige wijze gebruiken binnen een webpagina. LivePhotoKit is een door Apple ontwikkelt javascript dat er voor zorgt dat Live Photos kunnen worden weergeven en afgespeeld.
Live Photos exporteren
Je kunt alleen via de macOS Foto's applicatie een Live Photo exporteren om deze te gebruiken op een webpagina, gebruik hiervoor de onderstaande stappen:
• Open de Foto's app en selecteer het 'Live Photos'-album in de linker zijbalk.
• Selecteer de Live Photo die je wilt gebruiken.
• Ga naar Archief ▸ Exporteer ▸ 'Ongewijzigd origineel exporteren voor 1 foto...'
• In het export venster klik je op 'Exporteer'.
• Kies nu een map waar je de live foto wil bewaren.
Na het exporteren heb je een .JPG en .mov bestand, upload bestanden naar je webserver.
LivePhotosKit HTML code
Nadat de bestanden zijn geupload naar een webserver dien je de onderstaande HTML template te gebruiken om de Live Photo zichtbaar te maken.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js">
</script>
</head>
<body>
<div
data-live-photo
data-photo-src="https://.."
data-video-src="https://..."
style="width: 320px; height: 320px">
</div>
</body>
</html>
Bij data-photo-src vul je de volledige http link naar het JPG bestand in, bij data-video-src vanzelfsprekend de link naar het video (.mov) bestand.
Live Photos weergeven in WordPress
Wanneer je een Live Photo op een WordPress blog wilt plaatsen dan volstaat de onderstaande HTML code, deze kun je in direct in een post plakken en zal in de meeste gevallen zonder problemen werken.
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
<div
data-live-photo
data-photo-src="https://..."
data-video-src="https://..."
style="width: 320px; height: 320px">
</div>
Als je de Live Photo bekijkt op een iOS apparaat dat geen ondersteuning heeft voor 3D touch dan kun je de Live Photo activeren door je vinger op de foto te leggen. Op een Mac of PC kun je beweging activeren door te klikken op het Live Photo symbool in de rechterbovenhoek.
Meer informatie de livephotoskitjs kun je terugvinden op de deze Apple developer pagina.
| Auteur | Richard IJzermans | |
| Bijgewerkt | 12/02/2021 15:35 | |
| Categorie | iPhone | |
Reacties
Nee dat klopt en dat is jammer want het is een geweldige vervanger voor b.v iWeb of Freeway express. Super eenvoudig en genereert uitstekende code en responsive sites. Ben overigens geen aandeelhouder, maar inmiddels enthousiast gebruiker ;-).
Ik denk niet dat veel mensen Sparkle kennen.
Of je gebruikt een webdesign pakket zoals Sparkle. Dat ondersteunt Live Photos al native.