examples/full-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" data-youtube-videoid="KFstP0C9sVk"></div>
<div>
<select class="js-videos" disabled>
<option value="KFstP0C9sVk" selected>fox capture plan / 疾走する閃光</option>
<option value="5wLWhSZ1Uvo">Detektivbyrån - The Making Of "Wermland" Part 5.</option>
</select>
<button class="js-load" disabled>Load</button>
<br />
<button class="js-play" disabled>Play</button>
<button class="js-pause" disabled>Pause</button>
<input class="js-currentTime" type="range" min="0" max="1" value="0" disabled />
<span class="js-currentTimeText">-:--</span>
/
<span class="js-durationText">-:--</span>
<br />
<label><input class="js-mute" type="checkbox" disabled>Mute</label>
<input class="js-volume" type="range" min="0" max="1" step="0.01" value="0" disabled />
<br />
<input class="js-playbackRate" type="range" min="0" max="4" step="1" value="2" disabled />
x<span class="js-playbackRateText">0</span>
<br />
<label><input class="js-logging" type="checkbox" checked />Log all events in console</label>
</div>
<script src="../out/web/html5-youtube.js"></script>
<script>
(function() {
var elPlayer = document.querySelector('.js-player');
var elVideos = document.querySelector('.js-videos');
var elLoad = document.querySelector('.js-load');
var elPlay = document.querySelector('.js-play');
var elPause = document.querySelector('.js-pause');
var elCurrentTime = document.querySelector('.js-currentTime');
var elCurrentTimeText = document.querySelector('.js-currentTimeText');
var elDurationText = document.querySelector('.js-durationText');
var elMute = document.querySelector('.js-mute');
var elVolume = document.querySelector('.js-volume');
var elPlaybackRate = document.querySelector('.js-playbackRate');
var elPlaybackRateText = document.querySelector('.js-playbackRateText');
var elLogging = document.querySelector('.js-logging');
elCurrentTimeText.setTime = elDurationText.setTime = function(time) {
var min = parseInt(time/60, 10);
var sec = ('0' + parseInt(time%60, 10)).slice(-2);
var text = min + ':' + sec;
this.innerHTML = text;
};
var player = window.player = new Html5YouTube(elPlayer);
player.addEventListener('canplay', function(event) {
elVideos.disabled = false;
elLoad.disabled = false;
elPlay.disabled = false;
elPause.disabled = true;
elCurrentTime.disabled = false;
elMute.disabled = false;
elVolume.disabled = false;
elPlaybackRate.disabled = false;
elCurrentTime.value = player.currentTime;
elCurrentTimeText.setTime(player.currentTime);
elVolume.checked = player.muted;
elVolume.value = player.volume;
elPlaybackRate.value = Html5YouTube.availablePlaybackRates.indexOf(player.playbackRate);
elPlaybackRateText.innerHTML = player.playbackRate;
});
player.addEventListener('play', function(event) {
elPlay.disabled = true;
elPause.disabled = false;
});
player.addEventListener('timeupdate', function(event) {
elCurrentTime.value = player.currentTime;
elCurrentTimeText.setTime(player.currentTime);
});
player.addEventListener('pause', function(event) {
elPlay.disabled = false;
elPause.disabled = true;
});
player.addEventListener('emptied', function(event) {
elPlay.disabled = false;
elPause.disabled = true;
});
player.addEventListener('durationchange', function(event) {
elCurrentTime.max = player.duration;
elDurationText.setTime(player.duration);
});
player.addEventListener('volumechange', function(event) {
elMute.checked = player.muted;
elVolume.value = player.volume;
});
player.addEventListener('ratechange', function(event) {
elPlaybackRate.value = Html5YouTube.availablePlaybackRates.indexOf(player.playbackRate);
elPlaybackRateText.innerHTML = player.playbackRate;
});
player.addEventListener('error', function(event) {
console.error(event);
});
var typeListener = function(event) { elLogging.checked && console.log(':'+event.type); };
player.addEventListener('onApiChange', typeListener);
player.addEventListener('onError', typeListener);
player.addEventListener('onPlaybackQualityChange', typeListener);
player.addEventListener('onPlaybackRateChange', typeListener);
player.addEventListener('onReady', typeListener);
player.addEventListener('onStateChange', typeListener);
player.addEventListener('error', typeListener);
player.addEventListener('emptied', typeListener);
player.addEventListener('canplay', typeListener);
player.addEventListener('canplaythrough', typeListener);
player.addEventListener('playing', typeListener);
player.addEventListener('ended', typeListener);
player.addEventListener('durationchange', typeListener);
player.addEventListener('timeupdate', typeListener);
player.addEventListener('play', typeListener);
player.addEventListener('pause', typeListener);
player.addEventListener('ratechange', typeListener);
player.addEventListener('volumechange', typeListener);
elLoad.addEventListener('click', function(event) {
var videoId = elVideos.value;
player.src = videoId;
});
elPlay.addEventListener('click', function(event) {
player.play();
});
elPause.addEventListener('click', function(event) {
player.pause();
});
elCurrentTime.addEventListener('change', function(event) {
player.currentTime = this.value;
});
elMute.addEventListener('click', function(event) {
player.muted = elMute.checked;
});
elVolume.addEventListener('change', function(event) {
player.volume = this.value;
});
elPlaybackRate.addEventListener('change', function(event) {
player.playbackRate = Html5YouTube.availablePlaybackRates[this.value];
});
})();
</script>
</body>
</html>