Apple의 LivePhoto를 웹에 포함하는 단계

Apple이 공개한 Javascript API 「LivePhotosKit JS」를 사용해, LivePhoto를 간단하게 임베드하기 위한 샘플을 만들어 보았습니다.

참고 : LivePhotosKit JS | Apple Developer Documentation

LivePhoto란?



참고 : Live Photos 촬영 및 활용 - Apple 지원
Live Photos는 셔터를 끄기 전후의 1.5초씩의 영상을 기록해 줍니다. iPhone 6s 이상에서 사용할 수 있는 기능입니다.

LivePhotos 포함 샘플



샘플 페이지
화면 오른쪽 상단에 "Live"아이콘이 표시되고 아이콘을 마우스 오버하면 LivePhoto 동영상이 재생됩니다.

지원



LivePhotosKit JS player가 서포트하고 있는 단말·브라우저는, iOS(Safari, Chrome), macOS(Safari, Chrome, Firefox), Android(※일부 단말)(Chrome (beta)), Windows(Chrome, Firefox, Edge , Internet Explorer 11)입니다.

코드


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
  </head>
  <body>
    <h1 style="font-family:sans-serif;">Live Photo埋め込みサンプル</h1>
    <div
      data-live-photo
      data-photo-src="https://ultimate-ez.com/wp-content/uploads/2017/05/IMG_4199.jpg"
      data-video-src="https://ultimate-ez.com/wp-content/uploads/2017/05/IMG_4199.mov"
      style="width: 1024px; height: 768px">
    </div>
  </body>
</html>

CDN에있는 livephotoskit.js를로드하고 하나의 LivePhoto를 구성하는 이미지 (.jpg) 및 비디오 (.mov) 파일을 각각 data-photo-src 및 data-video-src의 데이터 속성에 저장하기 만하면됩니다. .

LivePhoto 로딩 절차



소재가 되는 LivePhoto를 구성하는 이미지(.jpg)와 동영상(.mov) 파일을 iPhone에서 꺼내려면 Mac의 '사진' 앱을 사용하기 쉽습니다.
  • iPhone과 Mac을 Lightning 케이블로 연결
  • 사진 로드
  • 가져온 사진을 선택하고 [파일] > [내보내기] > [한 장의 사진 편집되지 않은 원본을 내보내기…]를 선택합니다.
  • 내보내기 버튼을 클릭합니다.
  • 「.jpg」 「.mov」의 파일이 써내면 성공입니다.

    ".jpg"".mov"파일을 모두 적절한 위치에 저장하고 각각 data-photo-src 및 data-video-src 데이터 속성에 지정하면 LivePhoto를 웹에 포함할 수 있습니다.
  • 좋은 웹페이지 즐겨찾기