shingohry/with-declarative-html.html

## 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>

## 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() });

## 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>
	<!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>
	'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() });