Skip to content

Instantly share code, notes, and snippets.

@shingohry

shingohry/with-declarative-html.html

Last active April 29, 2017 14:18
Show Gist options
  • Save shingohry/1529360e2333d74f768809d70720f5b9 to your computer and use it in GitHub Desktop.
Save shingohry/1529360e2333d74f768809d70720f5b9 to your computer and use it in GitHub Desktop.
Download ZIP
LivePhotosKit JS Samples
Raw
with-declarative-html.html
<!DOCTYPE html>
<html>
<head>
<title>With Declarative HTML</title>
<meta charset="utf-8">
<!-- [1]LivePhotosKit JSのスクリプトを埋め込み -->
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
</head>
<body>
<h1>With Declarative HTML</h1>
<!-- [2]プレイヤー用の属性を指定 -->
<div data-live-photo data-photo-src="./photo.JPG" data-video-src="./photo.mov" style="width: 640px; height: 320px">
</div>
</body>
</html>
Raw
with-js-api-script.js
'use strict';
// [1]既存のDOM要素を指定してプレイヤーを作成
const player = LivePhotosKit.Player(document.getElementById('live-photo-target-element'));
player.photoSrc = './photo.JPG';
player.videoSrc = './photo.mov';
// [2]プレイヤーのイベントリスナーを追加
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));
// [3]ボタンのイベントリスナーを追加
document.getElementById('play-button').addEventListener("click", function() { player.play() });
document.getElementById('stop-button').addEventListener("click", function() { player.stop() });
Raw
with-js-api.html
<!DOCTYPE html>
<html>
<head>
<title>With JavaScript API</title>
<meta charset="utf-8">
</head>
<body>
<h1>With JavaScript API</h1>
<div id="live-photo-target-element" style="width: 640px; height: 320px">
</div>
<button type="button" id="play-button">Play</button>
<button type="button" id="stop-button">Stop</button>
</body>
<!-- [1]LivePhotosKit JSのスクリプトを埋め込み -->
<script src="https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js"></script>
<script src="./with-js-api-script.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment