Skip to main content
Tutorial JavaScript LivePhotosKit
JavaScript
21 April 2017
# Topik
Joomla!
Aplikasi
Artwork
Info
JavaScript
Diri Sendiri
PHP
Tazkirah
MySQL
Umum
SPLaSK
YOOtheme Pro
Page Builder
Ikuti Saya
JavaScript

Tutorial JavaScript LivePhotosKit

21 April 2017
Live Photos ialah sebuah fungsi yang terdapat pada iPhone 6s dan ke atas dimana video pendek akan dirakam apabila anda mengambil gambar. Sayangnya, video yang dirakam ini hanya boleh ditonton diperanti apple yang menyokong Live Photos sahaja, walaupun aplikasi seperti Instagram dan Facebook boleh menukarkannya menjadi video Boomerang ataupun imej GIF.

Bagi mereka yang ingin mengekalkan keaslian video Live Photo ini apabila ia dimuatnaik ke laman web atau blog, Apple baru sahaja mengumumkan API JavaScript LivePhotosKit, yang membolehkan kita memapar Live Photos.

Contoh gambar Live Photos :

Gambar ini diambil semasa bercuti di Medan, Indonesia baru-baru ini

Browser Compatibility

Setakat ini browser yang support adalah :
iOSSafari, Chrome
macOSSafari, Chrome, Firefox
AndroidChrome (beta)
WindowsChrome, Firefox, Edge, Internet Explorer 11

Cara Untuk Muat Naik Gambar Live Photos

Terdapat dua komponen pada Live Photo apabila gambar diambil, iaitu foto dan video. Foto akan disimpan di dalam format .JPG dan video di dalam .MOV.

Cara 1 - Menggunakan macOS Photos

  • Connect your iOS device to your Mac.
  • Import your photos into the Photos application.
  • Select the Live Photo you wish to export.
  • Use File > Export > Export Unmodified Original to export to your file system.

Cara 2 - Menggunakan macOS Image Capture

  • Connect your iOS device to your Mac.
  • Select the Live Photo you wish to import from your device to your local file system.
  • Choose the destination folder and click on Import.

Cara 3 - Menggunakan Windows 10 File Explorer

  • Ensure that iTunes for Windows is installed. You can download it from here: http://www.apple.com/itunes/download/
  • Open File Explorer. This can be opened by pressing the Windows Key and E at the same time.
  • Connect your iOS device to your PC.
  • You should see your iOS device in the "This PC" folder.
  • Navigate to the following folder: (your device) > Internal Storage > DCIM and look for the Live Photo you wish to import.
  • Your Live Photo will be stored as a pair of files: a JPG file and a MOV file.
  • Drag the pair of files to your local file system.

Penting

If the assets are large, they will take a long time to download. If the photo takes too long, it will not be able to show the progress badge. To avoid this problem, the element that is being decorated to be a player should explicitly specify its height and width. Downsizing assets will greatly improve performance and reduce bandwidth usage.

Penggunaan LivePhotosKit JS

1. Embed LivePhotosKit JS pada web 
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
2. CSS 
div[data-live-photo] {
    vertical-align: middle; width: 270px; height: 360px;
}
3. Kod HTML 
<!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://...">            
        </div>
    </body>
</html>

Maklumat lanjut

  1. https://developer.apple.com/live-photos/
  2. https://developer.apple.com/reference/livephotoskitjs/

Kandungan Terbaru