An Easier Way to
 Embed Video in Your
        Blog
 or how oEmbed can help you keep your
                 sanity
by Stepha...
Who are we?
The NFB
NFB.ca : film streaming
http://www.nfb.ca/film/runaway_teaser_3/
The Problem
the insanity of
   embedding
       content
you have a design
to keep
deformed webpage or blog post because
of an embedded film, 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"
a...
Error prone



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

• changes are error prone for HTML
  novices.

• the HTML cod...
One needs to do a lot of leg work - get
the title, author, etc when one wants
to quote properly.
There is a
 solution
the ideal would be :



http://www.nfb.ca/film/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
IT IS ...
oEmbed
an oEmbed link


http://www.nfb.ca/film/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/film/runaway_teaser_3/

• paste it...
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 fo...
An automated exchange
        between :
• Providers :
   • a streaming site (ie : nfb.ca )
   • photo site (ie flickr.com)
...
What do the machines
      speak ?

        JSON
         or
        XML
What is exchanged ?
• Author information
• provider information
• thumbnail link
• content type
• dimension information
• ...
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/servi...
what the machine sees : (JSON )
{
"provider_url": "http://www.nfb.ca/", "title": "Runaway (Teaser 3) ",
"url": "http://www...
Who uses it?
Some Providers
Some consumers
• the NFB (http://www.nfb.ca/)
• Buckybase (http://
  buckybase.appspot.com/)
• 280 Slides (http://280slide...
What can it do for
        blogging

• makes your life easier
• clean posts - no ugly html lurking into
  your pristine te...
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/
• Tuto...
Contact info

• Stephane Jolicoeur : @sjolicoeur |
  s.jolicoeur@nfb.ca
• Audrey Savard : @arvanhalleorg |
  a.savard@nfb....
Any WordPress theme
        builders ?


We are looking for wordpress themes
gurus wanting some freelance work.
Oembed Wordcamp 2009 Montreal
Oembed Wordcamp 2009 Montreal
Oembed Wordcamp 2009 Montreal
Upcoming SlideShare
Loading in …5
×

Oembed Wordcamp 2009 Montreal

1,216 views

Published on

Presentation of the NFB oEmbed plugin for wordpress and why oEmbed is important for content bloggers.

Published in: Technology, Travel, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,216
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Oembed Wordcamp 2009 Montreal

  1. 1. 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
  2. 2. Who are we?
  3. 3. The NFB
  4. 4. NFB.ca : film streaming
  5. 5. http://www.nfb.ca/film/runaway_teaser_3/
  6. 6. The Problem
  7. 7. the insanity of embedding content
  8. 8. you have a design to keep
  9. 9. deformed webpage or blog post because of an embedded film, picture or link is not acceptable
  10. 10. Let’s face it, embed code is strange!
  11. 11. 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>
  12. 12. Error prone The result :
  13. 13. • 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!
  14. 14. One needs to do a lot of leg work - get the title, author, etc when one wants to quote properly.
  15. 15. There is a solution
  16. 16. the ideal would be : http://www.nfb.ca/film/strange_invaders/
  17. 17. Let the machines do the hard work
  18. 18. • it was created by pownce -- it's magic, almost... • it is an exchange format for media, links and more...
  19. 19. less hacking gives you more time to create content
  20. 20. •help your seo with easy linking to the original site •prevent typos when quoting the source
  21. 21. IT IS ...
  22. 22. oEmbed
  23. 23. an oEmbed link http://www.nfb.ca/film/strange_invaders/
  24. 24. And because we maintain many blogs ... we cooked up a plugin.
  25. 25. 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à! -- after you’ve installed our plugin, of course ...
  26. 26. No more embed madness
  27. 27. Make this easy :
  28. 28. 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
  29. 29. An automated exchange between : • Providers : • a streaming site (ie : nfb.ca ) • photo site (ie flickr.com) • ... and • Consumers : • a blog site • a mashup • ...
  30. 30. What do the machines speak ? JSON or XML
  31. 31. What is exchanged ? • Author information • provider information • thumbnail link • content type • dimension information • html code to do the embedding
  32. 32. What is this “discovery” • information is in the headers • no prior knowledge required
  33. 33. 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/&amp;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/&amp;format=xml" title="Runaway (Teaser 3) " /> (...) </head>
  34. 34. 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 }
  35. 35. Who uses it?
  36. 36. Some Providers
  37. 37. Some consumers • the NFB (http://www.nfb.ca/) • Buckybase (http:// buckybase.appspot.com/) • 280 Slides (http://280slides.com/) • Dumble (http://oohembed.com/ dumble/) • YOU !
  38. 38. What can it do for blogging • makes your life easier • clean posts - no ugly html lurking into your pristine text • better SEO
  39. 39. What you need to know about our plugin • it's beta ... but in production • partial support for the fullspecs
  40. 40. live demo
  41. 41. Where to get it • http://wordpress.org/extend/plugins/ nfb-video-plugin/ • https://launchpad.net/oembed-wp
  42. 42. The end • we're open for suggestions for the next release
  43. 43. 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
  44. 44. Contact info • Stephane Jolicoeur : @sjolicoeur | s.jolicoeur@nfb.ca • Audrey Savard : @arvanhalleorg | a.savard@nfb.ca • @thenfb | @onf
  45. 45. Any WordPress theme builders ? We are looking for wordpress themes gurus wanting some freelance work.

×