ONF/NFB - An Easier Way to Embed Video in Your Blog

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

Who are we?

The NFB

NFB.ca : ﬁlm streaming

• http://nfb.ca/playlist/exhibition-nfb- photos-70-years-images/viewing/ nfb-70-years/

The Problem

the insanity of embedding

you have a design to keep

• 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>

Example The result :

• 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.

There is a solution

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

IT IS ...

oEmbed

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à!

No more embed madness

Make this easy :

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 }

Who uses it?

Some Providers

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

What you need to know about our plugin • it's beta ... but in production • partial support for the fullspecs

live demo

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

ONF/NFB - An Easier Way to Embed Video in Your Blog

0 comments

Notes on slide 1

2 Favorites