Apple Live Photos API happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 이미지관련 > Apple Live Photos API 상세정보

클라우드태그

javascript

PHP

CSS

HTML

ASP

API

jquery

MYSQL

image

mobile

slide

게시판

메뉴

현재접속자 31명

Apple Live Photos API

해피팀

네티즌

소스분류

이미지관련

다운로드 횟수

51 회

간단설명

Apple 에서 제공하는 live photos js 를 이용하여 live 포토를 구현하는 과정입니다.

평가하기

이번에 소개해 드릴 자료는 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;