更多

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

    Mickey Chan
    Mickey Chan
    愛騎單車的宅,眼鏡娘控。 1.膽固醇跟美味是成正比的; 2.所有人都可以騙,但絕對不能騙自己; 3.賣掉的貨才是錢,不賣的收藏品不值一文; 4.踩單車,是為了吃更多美食! 5.正義的話語,不一定出自正義之人的口;

    Check Point 發表 2021 網絡安全預測    預言冒充疫苗的釣魚活動湧現

    網絡安全解決方案供應商 Check Point 日前發表 2021 網絡安全預測。面對全球疫情反彈的狀況, Check Point 列出 5 種未來需要面對的網絡安全威脅,他們敦促世界各地組織應該做好準備面對不斷演變的網絡攻擊,以應對專家稱之為「下一個常態( Next Normal )」的新階段。

    Microsoft 明年一月出新機    Surface Pro 8 及 Surface Laptop 4 諜照流出

    Microsoft 兩款預計在明年 1 月中推出的新筆記簿電腦 Surface Pro 8 和 Surface Laptop 4 的照片被流出。據知這批照片是來自韓國的安全審查文件,顯示這兩款後繼機的外型不會有重大改變。

    PlayStation 官方發文指 PS5 開賣成績超越 PS4    香港再開訂 THE CLUB 存貨 38 秒被瞬殺

    PlayStation 官方日前在 Twitter 發表推文,感謝遊戲迷支持,令 PS5 的開賣成績成為該公司歷來最盛大的遊戲機開賣,意味 PlayStation 5 的開賣成績已經超越 PS4 。而香港今早再次接售預訂,其中 THE CLUB 僅 38 秒就將發售份額全數售清。

    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 動畫,好處是方便,缺點是畫質受限亦沒有控制播放的方法。

    您會感興趣的內容

    相關文章