First XSLT Function
Vimeo
So we have made a function for YouTube. Let’s make one for Vimeo, another online video service, as well.
Visit vimeo.com and examine at the site and find out the way to embed their videos.
Their URL’s to a video is something like this: http://www.vimeo.com/3826770
So they use a large integer for uniquely identifying a video.
They provide an embed tag code generator as well:
<object width="400" height="301"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3826770&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3826770&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="301"></embed></object><br /><a href="http://vimeo.com/3826770"> Rihanna - Disturbia (Live@VMA 2008)</a> from <a href="http://vimeo.com/user1477864">Rihanna More</a> on <a href="http://vimeo.com">Vimeo</a>
Listing 7: Vimeo’s embed video code
Ehm, doesn’t this look familiar?
I guess I can leave the rest to you!
I would surely add the width and height parameters in here, in YouTube they are mostly the same but with Vimeo they differ a lot. Unfortunately I have not yet found out how to request the correct values from Vimeo. Users can use the preview and the Vimeo embed code to pull the correct sizes. Tell them to do so with your function description and help text on your function.
And they allow for a little more customizing, you can specify colors etc to better match your website!
I came up with this XSLT part in the <body> section:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
...
<!-- Vincent van Gentevoort nov 2008
optional attributes
show_title, show_byline show_portrait fullscreen color 00adef blue
http://vimeo.com/moogaloop.swf?clip_id={$moviecode}&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=&fullscreen=0
-->
<xsl:param name="moviecode" select="/in:inputs/in:param[@name='moviecode']" />
<xsl:param name="height" select="/in:inputs/in:param[@name='height']" />
<xsl:param name="width" select="/in:inputs/in:param[@name='width']" />
<xsl:param name="allowfullscreen" select="/in:inputs/in:param[@name='allowfullscreen']" />
<xsl:template match="/">
<html>
<head />
<body>
<object width="{$width}" height="{$height}">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie"
value="http://vimeo.com/moogaloop.swf?clip_id={$moviecode}" />
<embed
src="http://vimeo.com/moogaloop.swf?clip_id={$moviecode}"
type="application/x-shockwave-flash"
allowfullscreen="false"
allowscriptaccess="always"
width="{$width}" height="{$height}">
</embed></object>
...
</body>
</html>
</xsl:template>
</xsl:stylesheet>Listing 8: Using the embed code in the function
This results in something like this:
Figure 20: Part of the rendered page with the Vimeo function