Forum Moderators: open
The problem is, how to display given feed results on my website? can anyone help me?
//>YTControl.js
//requires addThisEvent function
//also requires swfobject, see: http://code.google.com/p/swfobject/
//you should never need more than one youtube player on a page,
//so YTControl is setup as a single object to control a single youtube player
var YTControl = {
player : null, //will be the DOM element of the player, is set by the onYouTubePlayerReady function
loaded : false,
//used to request a feed from youtube's data api, pass it a string of keywords:
request : function (keywords) {
//see the youtube data api: http://code.google.com/apis/youtube/2.0/reference.html
var script = document.createElement('script'),
url = 'http://gdata.youtube.com/feeds/api/videos?q=';
url += encodeURIComponent(keywords);
url += '&orderby=relevance&max-results=5&alt=json-in-script&callback=YTControl.receiver';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
script.src = url;
},
receiver : function (data) { //data will be a json object
var i, id, entry, description, thumb, click, title,
urlBase = 'http://www.youtube.com/v/',
//youtube player parameters, see: http://code.google.com/apis/youtube/player_parameters.html
urlParams = '?enablejsapi=1&playerapiid=ytplayer&version=3&playlist=',
playlist = [], //will be filled with id's of youtube videos, such as: 'PV-Kg83mW1w'
playlistHTML = [], //will be filled with thumbnail images of playlist items
feed = data.feed,
entries = feed.entry,
//the following 3 variables used by swfobject.embedSWF below
params = { allowScriptAccess: "always", bgcolor: "#cccccc" },
attributes = { id: "myytplayer" },
flashvars = {}; //or null if no flashvars needed, such as here actually
for (i = 0; i < entries.length; i++) {
entry = entries[i];
id = entry.id.$t.match(/[^\/]+$/)[0]; //the id of the video
playlist.push(id);
description = entry.content.$t;
thumb = entry.media$group.media$thumbnail[1].url;
click = '" onclick="YTControl.playVideoAt('+ i +');"';
title = ' title="'+ description +'"';
playlistHTML.push('<img src="'+ thumb + click +' alt=""'+ title +'>');
}
if (!this.initialized) {
//see swfobject documentation: http://code.google.com/p/swfobject/wiki/documentation
swfobject.embedSWF(
urlBase + playlist[0] + urlParams + playlist.slice(1).join(','), //embedded youtube AS3 player with controls
'ytapiplayer', //id of the html element to embed the player in
'500', //width of player
'400', //height of player
'8', //minimum player version
null,
flashvars,
params,
attributes
);
this.initialized = true;
} else {
//youtube player javascript api: http://code.google.com/apis/youtube/js_api_reference.html
this.player.cuePlaylist(playlist);
}
function setPlaylistImages() {
document.getElementById('playlistItems').innerHTML = '<h4>Playlist</h4>'+ playlistHTML.join('<br>');
}
if (this.loaded) {
setPlaylistImages();
} else {
addThisEvent(window, 'load', function () {
setPlaylistImages();
});
}
},
loadVideo : function (id, startSeconds) {
if (this.player) {
this.player.loadVideoById(id, Number(startSeconds) || 0);
}
},
playVideoAt : function (index) {
if (this.player) {
this.player.playVideoAt(index);
}
}
};
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>youtube videos</title>
<style type="text/css">
#playlistItems h4 {
margin:2px;
text-align:center;
}
#playlistItems img {
cursor:pointer;
height:70px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
<!-- above script link from: http://code.google.com/p/swfobject/wiki/hosted_library -->
<script type="text/javascript" src="YTControl.js"></script>
<script type="text/javascript">
//function used for setting event listeners cross-browser.
//el may be a single html element as a DOM object, or the window object,
//type should be string name of event type ('on' prefix not required, so 'mouseover' or 'onmouseover' works fine)
//fn should be a function to set as an event handler
function addThisEvent(el, type, fn) {
var ename = type.replace(/^on/i, '');
if (el.attachEvent) { //IE
el.attachEvent('on'+ ename, function () {
return fn.call(el, window.event); //fixes IE's fudging of 'this' in attachEvent
});
} else if (el.addEventListener) { //Standard
el.addEventListener(ename, fn, false );
} else {
el["on"+ename] = fn;
}
}
//this function is automatically called by the youtube video player when it is ready
function onYouTubePlayerReady(playerId) {
//"myytplayer" is the id passed to swfobject in the attributes by YTControl.receiver
YTControl.player = document.getElementById("myytplayer");
}
//change this string below to whatever you wish to query the youtube data api for
var keywordsRequest = 'rocky mountain oysters';
YTControl.request(keywordsRequest);
addThisEvent(window, 'load', function () {
//YTControl wants it's loaded property set when the window is loaded
YTControl.loaded = this.loaded = true;
});
</script>
</head>
<body>
<div>
<div id="playerWrap" style="width:500px; height:400px; float:left;">
<div id="ytapiplayer">ytapiplayer div</div>
</div><!-- end playerWrap -->
<div id="playlistItems" style="height:400px; overflow:auto; float:left; margin-left:6px;"></div>
<br style="clear:both;">
<br>Dynamically load a different playlist: <button type="button" onclick="YTControl.request('jet airplanes');">Load Jet Airplanes</button>
</div>
</body>
</html>
