Code: Showing a list of youtube videos using gdata and xslt with php


Let’s start with a little demonstration. The section below is made by calling the php-script https://pappmaskin.no/opensource/youtube/youtube.php?s=super&max=9 within an iframe:

Why iframe?
Just to make it easier to reuse and embed Youtube videos on different sites, and because it makes it easier to try out new ideas without adding messy bits to a larger project. Sort of like rapid prototyping/proof of concept before “committing” to a feature and spending alot of time integrating something you might end up throwing out.

This solution currently consists of these files:
youtube.php, takes s=whateveryouwanttofind and max=number of videos to return as GET parameters
youtube5.xsl, does all the transformation of the xml from youtube into lovely xhtml.
youtube.js, javascript file that handles clicking on the thumbnails to load a new video, using innerHtml
youtube.css, minimalist styling to keep things pretty.
swfobject.js, for embedding flash

The xslt:

<?xml version=”1.0″ encoding=”UTF-8″?> <xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:fn=”http://www.w3.org/2005/xpath-functions” xmlns:gd=”http://schemas.google.com/g/2005″ xmlns:media=”http://search.yahoo.com/mrss/” xmlns:n1=”http://www.w3.org/2005/Atom” xmlns:openSearch=”http://a9.com/-/spec/opensearchrss/1.0/” xmlns:xdt=”http://www.w3.org/2005/xpath-datatypes” xmlns:xs=”http://www.w3.org/2001/XMLSchema” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns:yt=”http://gdata.youtube.com/schemas/2007″ xmlns:altova=”http://www.altova.com”> <xsl:output method=”html” encoding=”ISO-8859-1″ doctype-public=”-//W3C//DTD XHTML 1.0 Transitional//EN” doctype-system=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”/> <xsl:param name=”SV_OutputFormat” select=”‘HTML'”/> <xsl:variable name=”XML” select=”/”/> <xsl:template match=”/”> <html> <head> <title>Pappmaskin.no – Youtube playlist</title> <link rel=”stylesheet” href=”youtube.css” media=”screen” /> <script type=”text/javascript” src=”youtube.js”></script> <script type=”text/javascript” src=”swfobject.js”></script> </head> <body> <div id=”youtube”> <h1>YouTube Playlist</h1> <xsl:for-each select=”$XML”> <xsl:for-each select=”n1:feed”> <xsl:if test=”n1:entry[1]”> <div class=”youtubevideo”><div id=”cur_video”> <xsl:for-each select=”n1:entry[1]/media:group/media:content”> <xsl:if test=”@type = ‘application/x-shockwave-flash'”> <embed> <xsl:attribute name=”src”> <xsl:value-of select=”@url”/> </xsl:attribute> <xsl:attribute name=”width”>480</xsl:attribute> <xsl:attribute name=”height”>385</xsl:attribute> <xsl:attribute name=”quality”>high</xsl:attribute> <xsl:attribute name=”bgcolor”>#000</xsl:attribute> <xsl:attribute name=”id”>cur_video_swf</xsl:attribute> <xsl:attribute name=”name”>cur_video_swf</xsl:attribute> </embed> </xsl:if> </xsl:for-each> </div> <!– ends cur_video –> <div id=”cur_video_title”> <xsl:value-of select=”n1:entry[1]/n1:title”/> </div> </div>    <!– ends youtubevideo –> </xsl:if> <div class=”youtubethumbs”> <xsl:for-each select=”n1:entry”> <xsl:if test=”position() > 1″> <xsl:for-each select=”media:group”> <div class=”youtubethumb”> <xsl:for-each select=”media:content”> <xsl:if test=”@type = ‘application/x-shockwave-flash'”> <a> <xsl:attribute name=”href”>#</xsl:attribute> <xsl:attribute name=”onmousedown”>PlayVideo(‘<xsl:value-of select=”@url”/>’,’http://img.youtube.com/vi/h8oBykb_Pqs/2.jpg’, ‘Youtube’, true);</xsl:attribute> <xsl:attribute name=”onclick”>return false;</xsl:attribute> <xsl:for-each select=”../media:thumbnail[1]”> <xsl:element name=”img”> <xsl:attribute name=”src”><xsl:value-of select=”@url”/></xsl:attribute><xsl:attribute name=”lowsrc”>lowsrc.gif</xsl:attribute><xsl:attribute name=”width”>100</xsl:attribute><xsl:attribute name=”height”>60</xsl:attribute> </xsl:element> </xsl:for-each> <xsl:value-of select=”../media:title”/> </a> </xsl:if> </xsl:for-each> </div> <!– ends avslutter class youtubethumb –> </xsl:for-each> </xsl:if> <!– end if on position > 0 –> </xsl:for-each> </div><!– ends class youtubethumbnails –> </xsl:for-each> </xsl:for-each> <div class=”youtubefooter” style=”clear: both; color: #999999; font-size: 0.8em;”>Disclaimer: These videos are retrieved from Youtube through a simple search. Even though the search is done with a filter to remove “inappropriate material”, it may still contain videos deemed offensive by some. Videos may or may not be in violation of international copyright law.</div> </div> <!– avslutter id youtube –> </body> </html> </xsl:template> </xsl:stylesheet>

The PHP

<?php
$searchterm = $_GET[“s”];
$maxresults = $_GET[“max”];

/* load the xml file and stylesheet as domdocuments */
$xsl = new DomDocument();
$xsl->load(“youtube5.xsl”);
$inputdom = new DomDocument();

//Example http://gdata.youtube.com/feeds/videos?format=1&vq=Ratchet+Clank:+Tools+of+Destruction&max-results=2

$inputdom->load(“http://gdata.youtube.com/feeds/videos?format=5&vq=” . $searchterm . “&max-results=” . $maxresults);

//$inputdom->load(“youtube.xml”);
//if you want to test with a local file

/* create the processor and import the stylesheet */
$proc = new XsltProcessor();
$xsl = $proc->importStylesheet($xsl);
//$proc->setParameter(null, “titles”, “Titles”);
//not in use, but needed if you want to pass variables into the xslt from php

/* transform and output the xml document */
$newdom = $proc->transformToDoc($inputdom);
print $newdom->saveXML();
exit;
?>

Four ideas I believe in

PhotonQ-Woman 's Thoughts aKa Complex Memetics
photo credit: PhOtOnQuAnTiQuE

Readwriteweb wrote a post a few days ago about the lack of some New New Ideas for web startups, which I commented on. I wrote down a few old ideas I wish someone would like (and then steal):

photo credit: Whatsername?

1. Anything that uses the web to connect people to each other in a physical location

Everybody Deserves A Quickie

Any service that makes it as easy to approach people on the street etc as it is on Twitter or Facebook. There are heaps of services that touches on this field, but not many that works or have enough members to make it work. So maybe there is room for a service that connects it all, and shows you on a mobile map where people who are open to “hellos” are. It could be a facebook app (facebook has 1 million members in Norway, of 4.7 million inhabitants). Your mobile phone would simply broadcast itself with a “hello, talk to me” to a google map or a perhaps bluetooth. A cross between facebook, twitter and friendfeed, but with the purpose of connecting physical beings in a physical location.

three thumbs down
photo credit: rick

2. A web based service that lets you record video from any television channel.

It makes no sense for everyone to own their own PVR/TIVO/Mediacenter and record to disk at home, when you could do it sentralized and distribute it with bittorrent. The business model is like this: 10 gb storage for free, if you are too lazy to delete, or simply want to keep things online longer, you pay extra. Everything you program to record is automatically downloaded to your harddrive if you want to. The gold: You get access to EVERY channel on the planet. I wanted to create this in 1998, but never got around to it, so you can have that idea :)

3. 24/7 live streaming video from your mobile device, with a twist

Livestreaming from a cellphone is not new, it exists today, but here is the twist: 1) a small sensor analyses your brain-response to what you see or hear, and anything that creates an “unusual” reponse is indexed and flagged for later. 2) it also has a built in visual “thesaurus” (think wikipedia meets The Terminator), that can look up information on your surroundings in semi-realtime. So if you wanted to know wether or not to eat that delicious-looking red mushroom with the white dots, the system could advice you not to.

Did you know that american kids can identify 1000 products before they start school, but only know the name of 10 local plants (according to the movie The 11th hour)?

4. A google earth for the body

Read more about “A google earth for the body” here

Idea: A Google Earth for the body

google-body
Update 22. March 07: The Google Body idea has actually reached the ears of Google representative Jan Grønbech. One step closer to getting realized :P

Summary: I’ve been researching Google Earth lately, especially reading about the KML files that allows you to add new layers of information to Google Earth very easily, presenting your information on top of Google Earth.

But then I got this idea: There should be a Google Earth and a Google Map for the body, where you could rotate and navigate the human body in 3d, and zoom in, but instead of stopping on the surface, the zoom should continue through the skin, so that you could look on all the different layers, organs etc. I remember having a great encyclopedia on our home with transparent foils, each removing a layer of the body, the last layer showing the skeleton, the different parts of the body labeled with text: I spent hours looking at the female sexual reproduction organs it.

A user on digg suggested Jessica Alba as the female modelImage: A Digg comment suggest using Jessica Alba as the female model. I would have to agree wholehartedly :)

But what if you had a much more detailed model of the human body(*), and an interface to place “coordinates” on it, and something like a geocoder and an API to make it easy for content creators of all types to present the model on their website, just like you can with Google Map or Yahoo Maps today. And you could use something like the KLM format to let users present realtime data, for instance articles from a search engine, from magazines and newspapers, from research institutions etc. For instance, you could load the “map”, and have a graphical representation of all the research or news publish in the last 24 hours about the human body, like cancer research, advances in medicine, but also the possibility to add flickr images etc onto the model, for a more arty experience.

Perhaps presented as different categories or label. But most importantly, a solution that is very open for people to add on to, easy to share also in 2d, and with the ability to zoom and “fly” through the body.

Update! I just googled and found that Google is actually making this! The article is datestamped 12th of september 2007, so I beat them to it by a few months, and by them I mean the firm eHuman.com :)

Read more:
Move Over Google Maps, Get Ready For ‘Google Body’.
NBC Video
ehuman.com

(* well, probably two, one for each gender, and perhaps some for the different ages of man.)

CNNMoney: Why Google Scares Bill Gates

Google Lego 50th Anniversary Inspiration
photo credit: manfrys

Technology – Why Google Scares Bill Gates – Intro – FORTUNE: “Microsoft was already months into A massive project aimed at taking down Google when the truth began to dawn on Bill Gates. It was December 2003. He was poking around on the Google company website and came across a help-wanted page with descriptions of all the open jobs at Google. Why, he wondered, were the qualifications for so many of them identical to Microsoft job specs? Google was a web search business, yet here on the screen were postings for engineers with backgrounds that had nothing to do with search and everything to do with Microsoft’s core business—people trained in things like operating-system design, compiler optimization, and distributed-systems architecture. Gates wondered whether Microsoft might be facing much more than a war in search. An e-mail he sent to a handful of execs that day said, in effect, ‘We have to watch these guys. It looks like they are building something to compete with us.'”