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.

oEmbed workshop at Dev8D 2012

Future proofed embedding made easy

@nfreear

Institute of Educational Technology at The Open University

Please evaluate the workshop!
bit.ly/dev8d-oembed-form

Or why should I care about oEmbed? And let's name-drop HTML5

Agenda

Why? The old way...

YouTube embeds, the old way -->

Problems

A case-study: Cloudworks

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?

Who? Providers

Who? Consumers

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?

Why iframes?

HTML5 fullscreen

oembed-offline

//github.com/nfreear/oembed-offline

by @nfreear for Dev8D

go play...

Dev8D on Vimeo, using oEmbed...

Vimeo: AR.Drone + Kinect + Dev8D / ukoln

Providers beware

Guidelines for oEmbed
(CloudEngine wiki)

impress.js

use the source, Luke!

Thank you

data.dev8d.org/2012/programme/event/ET04
N.D.Freear+@+open.ac.uk

@nfreear
Please evaluate the workshop!
bit.ly/dev8d-oembed-form

Use a spacebar or arrow keys to navigate