웹페이지에서 LivePhotos 재생
이번에는 실제로 웹 페이지에서 Live Photos를 재생하는 방법을 소개합니다.
LivePhotos 가져오기
macOS의 경우
이제 LivePhotos를 PC로 가져올 수 있습니다.
출력처의 디렉토리에 JPG와 mov 파일이 출력되고 있으면 문제 없습니다.
그 외의 캡처 방법이나, Windows에서의 LivePhotos의 캡처도 가능합니다.
자세한 내용은 여기
LivePhotos 재생
절차는 매우 간단하며,
1. LivePhotosKit JS 로드
2. 요소에
data-live-photo 속성과 height , width 추가※주:
height , width를 지정하지 않거나 0을 지정하면 LivePhotos는 재생되지3. 캡처한 LivePhotos의 JPG 및 mov 파일 위치를
data-photo-src 및 data-video-src로 지정<!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="img/LivePhotos.JPG"
data-video-src="img/LivePhotos.mov"
style="width: 320px; height: 320px">
</div>
</body>
</html>
이상, 이것만으로 재생을 할 수 있습니다.
재생이 시작되는 것은
LIVE 버튼을 마우스 오버 한 타이밍입니다.API를 사용해보기
Player 객체
먼저 먼저 Player 객체를 만들어야 합니다.
여기에서는 기존 DOM 요소를 Player 객체로 만드는 방법을 소개합니다.
// LivePhotosKit.Playerの引数に対象の要素を指定
const player = LivePhotosKit.Player(document.getElementById('my-live-photo-target-element'));
// 取り込んだLivePhotosのJPGとmovファイルのロケーションを以下のように指定
player.photoSrc="img/LivePhotos.jpg";
player.videoSrc="img/LivePhotos.mov";
다양한 API
생성한 Player 객체를 사용하여 LivePhotos를 조작할 수 있습니다.
예를 들어, 재생의 타이밍을 지정하는 경우는,
play 메소드를 이용할 수 있습니다. 그 밖에도 stop, toggle 등의 메소드도 준비되어 있습니다.또한 다음 이벤트를 검색할 수 있습니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div
id="my-live-photo-target-element"
style="width: 320px; height: 320px">
</div>
<button id="btn-start">Start</button>
<button id="btn-pause">Pause</button>
<button id="btn-stop">Stop</button>
<button id="btn-toggle">Toggle</button>
</body>
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
<script>
const player = LivePhotosKit.Player(document.getElementById('my-live-photo-target-element'));
player.photoSrc="img/LivePhotos.jpg";
player.videoSrc="img/LivePhotos.mov";
// player can play
player.addEventListener('canplay', evt => console.log('player ready', evt));
// player ended
player.addEventListener('ended', evt => console.log('player finished playing through', evt));
// Playerのplayメソッドを呼び出すことで、LivePhotosが再生されます
document.getElementById('btn-start').addEventListener('click', evt => {
player.play();
});
// pauseメソッドを呼び出すことで、再生中のLivePhotosが一時停止します
document.getElementById('btn-pause').addEventListener('click', evt => {
player.pause();
});
// stopメソッドを呼び出すことで、再生中のLivePhotosが停止します
// 次回再生時は、途中からではなく始めからの再生となります
document.getElementById('btn-stop').addEventListener('click', evt => {
player.stop();
});
// toggleメソッドを呼び出すことで、LivePhotosの再生・一時停止を行います
document.getElementById('btn-toggle').addEventListener('click', evt => {
player.toggle();
});
</script>
</html>
덤
Mac에서 간단한 서버를 시작하는 방법
내가 작동 확인할 때 파이썬 명령을 실행하여 로컬 서버를 세웠다.
작성한 html 파일이 있는 디렉토리에서 다음의 명령을 두드리는 것만으로 기동을 할 수 있습니다.
python -m SimpleHTTPServer 8888
Reference
이 문제에 관하여(웹페이지에서 LivePhotos 재생), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Akinori_JP/items/a6e01b1e458eda4f473f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
