Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
For the best experience please use the latest Chrome or Safari browser. Firefox 10 (to be released soon) will also handle it.
Or why should I care about oEmbed? And let's name-drop HTML5
Agenda
First a few slides
The why? Who? What? And how?
Then activities using Github: nfreear/oembed-offline
Also on a memory stick!
Pre-requisites: Firefox + Firebug + some familiarity with Javascript
Why? The old way...
-->
Problems
Difficult for non-techies to copy, error-prone
Security holes
Potential to break sites
Not future proofed - HTML5 anyone?
Other routes, eg. a filter plugin for specific embeds, for your CMS – require maintenance
Users wanted to embed from various places
We didn't want security/ support head-aches
The solution: jquery-oembed
Embed from lots of places
Simple to add new providers/ roll new features..
Eg.,
changing from Slideshare's v1 to v2 oEmbed API in the site Javascript
(1 char change) will modify Slideshare embeds
throughout the site (benefit: no-Flash).
jquery-oembed
<a class=embed href="http://youtu.be/NaBBk-kpmL4">Martin Bean/YouTube</a>
<script src="jquery.js"></script>
<script src="jquery.oembed.js "></script>
<script>
$(document).ready(function() {
$("a.embed").oembed();
});
</script>
What is oEmbed?
A specification for an API
Quote “a format for allowing an embedded representation of a URL on third party sites.
The simple API allows a website to display embedded content... when a user posts a link to that resource, without having to parse the resource directly.”
A pragmatic, service-based approach to embedding
API responses in XML, JSON & JSON-P
Who? Providers
YouTube, Vimeo, Blip.tv, Viddler, Facebook video/photo
Slideshare, Prezi, Flickr, Cacoo
Google docs, LAMS
Ustream, Github, Wikipedia
...
Who? Consumers
Native in Wordpress 2.9 +
Drupal module
Cloudworks / CloudEngine
jquery-oembed
PHP libraries
Python, Django
Ruby
Perl …
Wordpress 2.9+
wp-config.php
// Foot of wp-config.php...
// Add providers...
wp_oembed_add_provider ( '#http://youtu.be/.*#i',
'http://embed.open.ac.uk/oembed', $regex=TRUE );
wp_oembed_add_provider( 'http://docs.google.com/*',
'http://embed.open.ac.uk/oembed', $regex=FALSE );
Why use proxies?
Not every site provides oEmbed
Aggregate services
'Improve' existing services
..
Oohembed.com - the 1st, 'sold' to..
Embed.ly - 100s!
Embed.open.ac.uk
research/ RDFa/ HTML5/ a11y / mobile/ niche/ OULDI / ouplayer
HTML5 fullscreen
Any content - video, photos, maps..
Experimental!
element.mozRequestFullScreen
,
element.webkitRequestFullScreen
Who? Firefox (9), 10+, Webkit.
oembed-offline
A play-space for offline workshops etc.
Built on jquery-oembed,
Contains JSON-P mock-data,
Contains offline hacks – compare with the included online files
Works best on Firefox + Firebug – network inspection
//github.com/nfreear/oembed-offline
by @nfreear for Dev8D