Apple 推出 LivePhotosKit JS API 幫你將 Live Photos 嵌入網頁

Apple 推出 LivePhotosKit JS API 幫你將 Live Photos 嵌入網頁

Live Photos 是自 iPhone6s 推出的拍攝功能之一,讓用戶可以簡單地拍攝三秒鐘有動態的照片。早前 Apple 開放讓開發人可以將 Live Photos 嵌入 App 裡顯示,而今天 Apple 更推出 LivePhotosKit JS API ,讓架網站的人可以將 Live Photos 嵌入 網頁上,而方法就只不過是上載照片和加兩個標籤而已。

網頁簡易嵌入 Live Photos 方法

1. 從 iPhone 輸出 Live Photos 到電腦,這會輸出到一個 JPG 檔和一個 MOV 檔;

使用 Image Capture (Mac) 或 File Explorer (Win) 瀏覽「(你的電腦)> Internal Storage > DCIM 」來匯入 Live Photos;

使用 Image Capture (Mac) 或 File Explorer (Win) 瀏覽「(你的電腦)> Internal Storage > DCIM 」來匯入 Live Photos;

2. 在 HTML 檔的 head 部分插入以下一句:

<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>

3. 在網頁想顯示 Live Photos 位置,插入以下這一段便完成:

<div data-live-photo
data-photo-src=“JPG 檔相對路徑”
data-video-src=“MOV 檔相對路徑”
data-proactively-loads-video="true"
style="width:圖片顯示闊度;height:圖片顯示高度;"
></div>

我們製了一個示範圍網頁,大家可以到這裡看看效果。

LivePhotosKit JS 官方文件:按此

其實, Google 去年在 iOS 就推出了《 Motion Stills 》 App ,可以比較方便地將 Live Photos 變換成 GIF 動畫。不過 GIF 圖檔要容量小就要犧牲畫質,而這個 LivePhotosKit JS 就可以原汁原味呈現 Live Photos 效果,還有 API 可讓大家以程式來控制播放。

下載 Motion Stills iOS 版:按此

Google 的《 Motion Stills 》 App ,可以將 Live Photos 變換成 GIF 動畫,好處是方便,缺點是畫質受限亦沒有控制播放的方法。

Google 的《 Motion Stills 》 App ,可以將 Live Photos 變換成 GIF 動畫,好處是方便,缺點是畫質受限亦沒有控制播放的方法。