×

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

Published september 16th, 2008 by


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;
?>

Posted in Code, Open Source

Code: Gameinfo + Gametrailers + Youtube Mashup

Published mars 8th, 2008 by

Norsk? Du finner en norsk versjon av denne artikkelen på NrkBeta.no

I recently made a Gameinfo service for spiller.no. It pulls in licenced gameinfo from our partner GameXplore though XML, and combines it with a search for related videoes from Youtube before it is presented on the page.

Example: FIFA STREET 3 Gameinfo – NRK Spiller

Youtube + Google Api
I made the Youtube part as a standalone page, and I include it with iframe. The reason I used Iframe was to make it easily reusable on other projects where it would fit to do something similar. I can for instance include it in my blog like this:

The page takes any search term as a GET, in this example it simply queries the youtube google api with the title of the game, with a few extra parameters (limit on the number of returned movies + a filter to remove “adult content”). I spent some time to create the XSLT to convert the xml from youtube/google to html, which is basically the same format for many of Googles services. I spent hours trying to find out if someone had created this already, but since I couldn’t find anything I had to create it myself. If you want to learn more about the youtube api I suggest starting at the Youtube Api group on Google Groups.

Open source

I have gotten some emails asking for the xslt for the youtube search, so I wanted to share it here:

This is my input, an example Youtube search

This is my example output:
https://pappmaskin.no/opensource/youtube/youtube.php

And here is the xslt I used to produce the above result:
https://pappmaskin.no/opensource/youtube/youtube3.xsl

If you have any questions, feel free to ask in the comments.

Spam? Porn? Nope!
I was of course a little worried about what the youtube search would return, so when testing I went through quite a few games to see if the search returned movies that were unrelated to the gametitle, or contained nudity, but so far it looks really good, the youtube videos are actually the most interesting part of the service, so I’m really happy with it!

Blip.tv gametrailers
Yesterday I also added gametrailers to the mix, check out the gamepage for Assassins Creed for an example (click on the huge image at the top of the page) to make it play. I have bought a lisence for the wonderful Jeroen FLV Media Player which I use to present the gametrailers.

New gametrailers page, based on blip.tv
After that I spent a few minutes to create a new page that lists all the latest gametrailers published through GameXplore. I use the Jeroen Flv Media Player for this page as well. I created this yesterday, so I have to debug it a little bit before we start to promote it, and I also have to consider to increase the video buffer time, it seems like blip.tv har pretty slow servers. Right now there is a five second buffer, which should be more than enough, but even with broadband connection the video stops and buffers every five second. I don’t want people to wait forever for the video to buffer, but it is super irritating when the video stops every 5 seconds to buffer, so I have to decide what to do with it. One (hard) solution could be to download all the .flv to my server and play them from there… I am a big fan of blip.tv, they have the best player around, and their cross posting abilities are great (at least in theory, I still haven’t gotten it to work with this blog or myspace), so I am a little dissapointed to discover that the blip.tv servers (or lines?) are so slow to deliver video. (to Norway at least).

Thickbox
I love the Jquery javascript library, and I love Thickbox, so I decided to use it on the Screenshots on the site, popping them up in their own little box. I modidied the thickbox script and css slightly, replacing the animated loading gif and moved things around a little bit, and I am really happy about the outcome.

Add the spiller.no Gameinfo search to your browser

Spiller.no Gameinfo

Sjekk ut info, screenshots, trailers og anmeldelser på nye og kommende spill:

So there it is, hope you like it :)

To embed the search in your site:

<div class=”placeholder”><h3>Spiller.no Gameinfo</h3>
<span style=”color: #fff; width: 160px; font-size: 0.8em;”>Sjekk ut info, screenshots, trailers og anmeldelser på nye og kommende spill:</span>
<form id=”gamesearchform” name=”gamexploresearch” enctype=”application/x-www-form-urlencoded” method=”get” action=”http://www.nrk.no/spiller/gameinfo/?”>
<fieldset>
<input type=”hidden” value=”143″ name=”task”/>
<input style=”padding: 1px 0 2px 0; width:100px; border:1px solid #F7F7F7; border-width: 0pt 1px 1px 0pt;” type=”text” value=”” maxlength=”500″ name=”finn”/>
<button type=”submit”><span>Søk</span></button>
</fieldset>
</form></div>

Posted in Code, NRK, Open Source, Portfolio, Webdesign, Webdev

Open source design – Vector Apple vs Pear logo

Published februar 26th, 2007 by

pear-logo2

I made a new header for my blog today, and I just wanted to share a few vector files for those interested in using it, or whatever.

The logo is, as you can see, based on the apple logo (duh!), but I changed it into a pear, and made the BITE larger. Why? Because I like pears. A lot! :)

The files:

pear-logo2.ai (for adobe illustrator)
pear-logo.fla (for adobe flash)

Design:

I’m using Adobe Flash more and more for pure design work, most of the sites I create are flash based, so I usually just start prototyping in Flash, not in Photoshop like most. I still use Photoshop exstensively of course, but very seldom for creating dummy layouts, it is just faster to do it in Flash. I suppose it’s a matter of preference, most designers will use Illustrator for creating their work, but since I work web and flash, using Illustrator just slows me down, it’s another tool to buy and learn, that doesn’t add much value compared to Flash and Photoshop. For my use that is.

Licence:

Use it for whatever you want. :) I don’t mind (but Apple might.) But please drop me a line if you use it. Make my day!

Posted in Featured, Open Source

Bomber Jack Clone

Published september 8th, 2003 by

Valgfleskspillet

I spent a few weeks creating a Bomber Jack clone from scratch for a radio show at NRK, and ended up reskinning it at least 3 times for other projects (easy money). This version was made for the Norwegian election in 2003.

Valgfleskspillet.

And here is a screenshot from another clone, made for the childens pages at NRK:

Hopp med Fantorangen

Want the code? Drop me a line!

Posted in Flash, NRK, Open Source, Portfolio