Live Photos on the Web

1

Apple has just released a library for displaying Live Photos on the web: https://developer.apple.com/reference/livephotoskitjs/

To use this in Hype, drop an image + video pair in your resources library, and display it as a live photo by using this code within an HTML Widget:

<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
	 
<div data-live-photo data-photo-src="${resourcesFolderName}/IMG_8576.JPG" data-video-src="${resourcesFolderName}/IMG_8576.mov" style="width: 420px; height: 420px">            
</div>

Demo document

To get a Live Photo, use the ‘Photos’ app and select File > Export > Export Unmodified Original. There’s no need to convert the exported .mov file to an mp4 since it is encoded in a web-friendly h264 codec.

2 Likes
2

For those of you who are too poor to have an iPhone that can do live photos.. ( like me :cry:)

You can replicate this if you want by taking a Movie and exporting the first frame as an image.

How to do this :

Open up a video in Quicktime Player 7.app ( my video has 4 second duration)shot on my iPhone 5s (Yes still using this work horse )

We then export a Movie Sequence and under the option settings we set:

Format = JPEG
Frames Per Second = 1
[Under Options in the settings, Best Depth Quality = Best ]

This gave me 4 image frames. Your movie duration may give you a different number.
We only need the first frame so we drop the first image in the Sequence and the video into Hype.

We then change the names of the jpeg and video in the code @Daniel provided to match the ones we just dropped in to the project.

And bobs your uncle, you should now have a Live video..

I used Quicktime Player 7 to get my image frame. I did this because I wanted to keep the same resolution as the video.
But you can use many methods to get your first frame including screen capture ( selection)

ALSO VERY IMPORTANT TIP

Using Quicktime Player 7 I removed the Audio track. I did this by displaying the Movie Properties (Show Movie Properties menu ), selecting the Audio track and deleting it. Then saving.

The last thing you want is people to be able to listen in on private audio from videos you recorded. (Nice singing @Daniel ):grin:

Live Demo from normal movie file.

5 Likes
3

Hi Daniel, I tested this: it’s ok in the Hype Preview, but not in the html5 export (offline and online). Can you can help me? :wink: Thank you

Luca

4

It requires an internet connection to work, since it loads a library from Apple’s server. Can you share what you have?

5

Hi Daniel, Sorry for my late reply. here you can find a very basic test, if you see it in the Hype Preview is ok, but if I Save it like an HTML (local or Online) it doesn’t work ;-(

6

It looks like you were referencing IMG_0522.mov but the filename was uppercase MOV. Changing the filename to lowercase seems to fix it:

http://tumult.com/support/temporary/2017/TestLivePhotos2/TestLivePhotos.html

1 Like
7

Great, thank you, Daniel!

Luca