ONF/NFB - An Easier Way to Embed Video in Your Blog
-
Upload
montreal-wordpress-community -
Category
Technology
-
view
3.477 -
download
4
description
Transcript of ONF/NFB - An Easier Way to Embed Video in Your Blog
![Page 1: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/1.jpg)
An Easier Way to Embed Video in Your
Blogor how oEmbed can help you keep your
sanity by Stephane Jolicoeur and Audrey Savard
![Page 2: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/2.jpg)
Who are we?
![Page 3: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/3.jpg)
The NFB
![Page 4: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/4.jpg)
NFB.ca : film streaming
![Page 5: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/5.jpg)
• http://nfb.ca/playlist/exhibition-nfb-photos-70-years-images/viewing/nfb-70-years/
![Page 6: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/6.jpg)
The Problem
![Page 7: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/7.jpg)
the insanity of embedding
![Page 8: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/8.jpg)
you have a design to keep
![Page 9: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/9.jpg)
• deformed webpage or blog post because of an embedded film, picture or link is not acceptable
![Page 10: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/10.jpg)
Let’s face it, embed code is strange!
![Page 11: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/11.jpg)
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&width=516&height=337&image=http://media1.nfb.ca/medias/nfb_tube/thumbs_large/2009/70ans-tvbig.jpg&autostart=false&autoplay=false&showWarningMessages=false&streamNotFoundDelay=15&lang=en&getPlaylistOnEnd=true&playlist_id=REL3521&embeddedMode=true"></embed>
![Page 12: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/12.jpg)
Example
The result :
![Page 13: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/13.jpg)
• 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 filters and be crippled or not even shown!
![Page 14: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/14.jpg)
One needs to do a lot of leg work - get the title, author, etc when one wants to quote properly.
![Page 15: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/15.jpg)
There is a solution
![Page 16: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/16.jpg)
Let the machines do the hard work
![Page 17: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/17.jpg)
• it was created by pownce -- it's magic, almost...
• it is an exchange format for media, links and more...
![Page 18: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/18.jpg)
less hacking gives you more time to
create content
![Page 19: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/19.jpg)
•help your seo with easy linking to the original site
•prevent typos when quoting the source
![Page 20: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/20.jpg)
IT IS ...
![Page 21: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/21.jpg)
oEmbed
![Page 22: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/22.jpg)
oEmbed link
http://www.nfb.ca/film/strange_invaders/
![Page 23: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/23.jpg)
And Because we maintain many blogs ... we cooked up a plugin.
![Page 24: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/24.jpg)
Your embeding on oEmbed
• copy the url of the content page : http://www.nfb.ca/film/runaway_teaser_3/
• paste it in your blog post
• et voilà!
![Page 25: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/25.jpg)
No more embed madness
![Page 26: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/26.jpg)
Make this easy :
![Page 27: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/27.jpg)
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
![Page 28: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/28.jpg)
An automated exchange between :
• Providers :• a streaming site (ie : nfb.ca )• photo site (ie flickr.com)• ...
and• Consumers :
• a blog site• a mashup • ...
![Page 29: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/29.jpg)
What do the machines speak ?
JSON
or
XML
![Page 30: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/30.jpg)
What is exchanged ?
• Author information
• provider information
• thumbnail link
• content type
• dimension information
• html code to do the embedding
![Page 31: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/31.jpg)
What is this “discovery”
• information is in the headers
• no prior knowledge required
![Page 32: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/32.jpg)
Discovery links :
<head> (...)
<link rel="alternate" type="application/json+oembed" href="http://www.nfb.ca/remote/services/oembed/?url=http%3A//www.nfb.ca/film/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/film/runaway_teaser_3/&format=xml" title="Runaway (Teaser 3) " />
(...) </head>
![Page 33: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/33.jpg)
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&streamNotFoundDelay=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&streamNotFoundDelay=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}
![Page 34: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/34.jpg)
Who uses it?
![Page 35: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/35.jpg)
Some Providers
![Page 36: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/36.jpg)
Some consumers
• the NFB (http://www.nfb.ca/)
• Buckybase (http://buckybase.appspot.com/)
• 280 Slides (http://280slides.com/)
• Dumble (http://oohembed.com/dumble/)
• YOU !
![Page 37: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/37.jpg)
What can it do for blogging
• makes your life easier
• clean posts - no ugly html lurking into your pristine text
![Page 38: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/38.jpg)
What you need to know about our plugin
• it's beta ... but in production
• partial support for the fullspecs
![Page 39: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/39.jpg)
live demo
![Page 40: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/40.jpg)
Where to get it
• http://wordpress.org/extend/plugins/nfb-video-plugin/
• https://launchpad.net/oembed-wp
![Page 41: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/41.jpg)
The end
• we're open for suggestions for the next release
![Page 42: ONF/NFB - An Easier Way to Embed Video in Your Blog](https://reader035.fdocuments.in/reader035/viewer/2022081404/557959b7d8b42ab6648b4d2e/html5/thumbnails/42.jpg)
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