Oembed Wordcamp 2009 Montreal

An Easier Way to
Embed Video in Your
Blog
or how oEmbed can help you keep your
sanity
by Stephane Jolicoeur and Audrey Savard

ONF-NFB

http://www.nfb.ca/ﬁlm/runaway_teaser_3/

the insanity of
embedding
content

deformed webpage or blog post because
of an embedded ﬁlm, picture or link is
not acceptable

Let’s face it, embed code is strange!

CASE in POINT : EMBED CODE

<embed src="http://media1.nfb.ca/medias/flash/
ONFflvplayer-gama.swf" width="516" height="337"
allowfullscreen="true" allowscriptaccess="always"
autostart="false" autoplay="false"
flashvars="mID=IDOBJ3521&bufferTime=10&wid
th=516&height=337&image=http://media1.nfb.ca/
medias/nfb_tube/thumbs_large/2009/70ans-
tvbig.jpg&autostart=false&autoplay=false&show
WarningMessages=false&streamNotFoundDelay=
15&lang=en&getPlaylistOnEnd=true&playlist_id=
REL3521&embeddedMode=true"></embed>

• ugly embed code in your blog posts
when you edit posts.

• changes are error prone for HTML
novices.

• the HTML code can be parsed by the
wp tag ﬁlters and be crippled or not
even shown!

One needs to do a lot of leg work - get
the title, author, etc when one wants
to quote properly.

the ideal would be :

http://www.nfb.ca/ﬁlm/strange_invaders/

Let the machines do the hard work

• it was created by pownce -- it's magic,
almost...
• it is an exchange format for media,
links and more...

less hacking gives
you more time to
create content

•help your seo with easy
linking to the original site
•prevent typos when
quoting the source

an oEmbed link

http://www.nfb.ca/ﬁlm/strange_invaders/

And because we
maintain many blogs ...
we cooked up a plugin.

Your embeding on
oEmbed

• copy the url of the content page :
http://www.nfb.ca/ﬁlm/runaway_teaser_3/

• paste it in your blog post
• et voilà! -- after you’ve installed our
plugin, of course ...

What is oEmbed

• it’s an exchange format ( meaning
machines do the hard work )
• with providers and consumers
• made for media, links or rich content.
• Magical when implemented fully :
discovery aspect

An automated exchange
between :
• Providers :
• a streaming site (ie : nfb.ca )
• photo site (ie ﬂickr.com)
• ...
and
• Consumers :
• a blog site
• a mashup
• ...

What do the machines
speak ?

JSON
or
XML

What is exchanged ?
• Author information
• provider information
• thumbnail link
• content type
• dimension information
• html code to do the embedding

What is this “discovery”

• information is in the headers
• no prior knowledge required

Discovery links :
<head>
(...)

<link rel="alternate" type="application/json+oembed" href="http://
www.nfb.ca/remote/services/oembed/?url=http%3A//www.nfb.ca/
ﬁlm/runaway_teaser_3/&format=json" title="Runaway (Teaser 3)
" />

<link rel="alternate" type="text/xml+oembed" href="http://www.nfb.ca/
remote/services/oembed/?url=http%3A//www.nfb.ca/ﬁlm/
runaway_teaser_3/&format=xml" title="Runaway (Teaser 3) " />

(...)
</head>

what the machine sees : (JSON )
{
"provider_url": "http://www.nfb.ca/", "title": "Runaway (Teaser 3) ",
"url": "http://www.nfb.ca/film/runaway_teaser_3/",
"html": "<object type="application/x-shockwave-flash" classid="clsid:D27CDB6E-
AE6D-11cf-96B8-444553540000" id="ONFflvplayer-gama" height="337" width="518"><param
name=movie value="http://media1.nfb.ca/medias/flash/ONFflvplayer-gama.swf"><param
name=quality value=high><param name=allowfullscreen value="true"><param name=allowscriptaccess
value="always"><param name=autostart value="false"><param name=flashvars value=
"mID=IDOBJ5811&image=http://media1.nfb.ca/medias/nfb_tube/thumbs_large/2009/
Runaway_TeaserAV5_BIG.jpg&width=516&height=337&autostart=false&showWarningMessages=false&str
eamNotFoundDelay=15&lang=en&getPlaylistOnEnd=true&embeddedMode=true"><embed src="http://
media1.nfb.ca/medias/flash/ONFflvplayer-gama.swf" height="337" width="518" allowscriptaccess=
"always" allowfullscreen="true" autostart="false" flashvars="mID=IDOBJ5811&image=http://
media1.nfb.ca/medias/nfb_tube/thumbs_large/2009/
Runaway_TeaserAV5_BIG.jpg&width=516&height=337&autostart=false&showWarningMessages=false&str
eamNotFoundDelay=15&lang=en&getPlaylistOnEnd=true&embeddedMode=true" name="ONFflvplayer-
gama"></embed></object>",
"author_name": "Cordell Barker",
"height": 337,
"width": 518,
"version": "1.0",
"thumbnail_width": 204,
"provider_name": "National Film Board of Canada / Office Nationale du Film du Canada",
"thumbnail_url": "http://media1.nfb.ca/medias/nfb_tube/thumbs_small/2009/
Runaway_TeaserAV5_small.jpg",
"type": "video",
"thumbnail_height": 115
}

Some consumers
• the NFB (http://www.nfb.ca/)
• Buckybase (http://
buckybase.appspot.com/)
• 280 Slides (http://280slides.com/)
• Dumble (http://oohembed.com/
dumble/)

• YOU !

What can it do for
blogging

• makes your life easier
• clean posts - no ugly html lurking into
your pristine text

• better SEO

What you need to know
about our plugin

• it's beta ... but in production
• partial support for the fullspecs

Where to get it

• http://wordpress.org/extend/plugins/
nfb-video-plugin/

• https://launchpad.net/oembed-wp

The end

• we're open for
suggestions for the
next release

Ressources

• oEmbed google group : http://
groups.google.com/group/oembed
• oEmbed site : http://www.oembed.com/
• Tutorial : http://www.webmonkey.com/
tutorial/Get_Started_With_OEmbed

Contact info

• Stephane Jolicoeur : @sjolicoeur |
s.jolicoeur@nfb.ca
• Audrey Savard : @arvanhalleorg |
a.savard@nfb.ca
• @thenfb | @onf

Any WordPress theme
builders ?

We are looking for wordpress themes
gurus wanting some freelance work.

Oembed Wordcamp 2009 Montreal

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

Oembed Wordcamp 2009 Montreal