examples/player.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5-youtube.js</title>
<style>
.player {
height: 300px;
width: 400px;
}
</style>
</head>
<body>
<h1>html5-youtube.js</h1>
<div class="player js-player"></div>
<div>
<button class="js-play" disabled>Play</button>
<button class="js-pause" disabled>Pause</button>
</div>
<script src="../out/web/html5-youtube.js"></script>
<script>
(function() {
var elPlayer = document.querySelector('.js-player');
var elPlay = document.querySelector('.js-play');
var elPause = document.querySelector('.js-pause');
var videoId = 'KFstP0C9sVk';
var player = new Html5YouTube(elPlayer, { videoId })
.on('ready', function(event) {
player.play();
})
.on('play', function(event) {
elPlay.disabled = true;
elPause.disabled = false;
})
.on('pause', function(event) {
elPlay.disabled = false;
elPause.disabled = true;
})
.on('ended', function(event) {
player.play();
});
elPlay.addEventListener('click', function(event) {
player.play();
});
elPause.addEventListener('click', function(event) {
player.pause();
});
})();
</script>
</body>
</html>