웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Apple Live Photos API 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] Apple Live Photos API

해피CGI윤실장 2018. 10. 31. 09:05

이번에 소개해 드릴 자료는 Apple 에서 제공하는 Live Photos API 입니다.
   
샘플 HTML 코드 안내 입니다.
 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
    </head>
    <body>
        <div id="Live_Photo_Div" style="width: 1024px; height: 720px;"></div>
    </body>
    <script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
    <script src="script/livephoto.js"></script>
</html>

  
  
script/livephoto.js 파일에 핵심코드가 들어 있습니다. 

const player = LivePhotosKit.Player(document.getElementById('Live_Photo_Div')); //div 객체 아이디
player.photoSrc = 'images/live/waves.jpg';  //이미지파일
player.videoSrc = 'images/live/waves.mov';  //영상 파일


위 처럼만 사용하시면 live photos 를 사용하실 수 있습니다. 
그리고 나머지는 옵션들에 대한 설정이 대부분 입니다. 

Events

player.addEventListener('canplay', evt => console.log('player ready', evt)); //시작
player.addEventListener('error', evt => console.log('player load error', evt)); //에러
player.addEventListener('ended', evt => console.log('player finished playing through', evt)); //종료
// Use the playback controls.
player.playbackStyle = LivePhotosKit.PlaybackStyle.HINT;
player.playbackStyle = LivePhotosKit.PlaybackStyle.FULL; //FULL 을 추천함.
player.play();
player.pause();
player.toggle();
player.stop();
// Seek the animation to one quarter through.
player.currentTime = 0.25 * player.duration;
// Seek the animation to 0.1 seconds into the Live Photo.
player.currentTime = 0.1;



LIVE 버튼에 마우스 올리면 Live Photos 기능을 확인할 수 있습니다. ^^






홈페이지바로가기 소스다운로드


저작자표시

'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글

[해피CGI][cgimall] jQuery UI Draggable Constrain movement  (0) 2018.11.07
[해피CGI][cgimall] themouette week calendar jquery  (0) 2018.10.31
[해피CGI][cgimall] 스크롤시 해더 영역이 고정되어 유지되는 midnight.js  (0) 2018.10.29
[해피CGI][cgimall] 쇼핑몰에서 쓰기 좋은 레이아웃 필터링 그리드  (0) 2018.10.29
[해피CGI][cgimall] Useful event calendar or datepicker with jQuery  (0) 2018.10.24
공유하기 링크
'웹프로그램밍 자료실/JAVA 자료' Related Articles more
Comments