Monday 5 March 2012

Play a Playlist using YouTube JavaScript API

If you have been enjoying our <iframe> embed announced back in July we have some good news for you. Starting today, the <iframe> embed code is the default way to share videos on YouTube.com. We are also introducing an initial beta version of the <iframe> embed JavaScript Player API, making it a viable alternative for developers who previously used the API exposed by the ActionScript players. Let’s look at an example of the API usage:

<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
playerVars: { 'autoplay': 0, 'controls': 1, 'playlist':['your_video_id', '...']},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>

This example will play a video for several seconds and then stop playback. An instance of YT.Player is used to control the player, defined by script loaded from http://www.youtube.com/player_api .  For more information about the API usage, as always, please consult our Player API documentation and let us know what you think on our Developer Forum.

No comments:

Post a Comment