Apple Live Photos API happycgi

회원가입

출석체크

마이페이지

CGIMALL

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

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

클라우드태그

Javascript

PHP

asp

CSS

html

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

Apple Live Photos API

해피팀

네티즌

소스분류

이미지관련

다운로드 횟수

47 회

간단설명

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;