Your SlideShare is downloading. ×
0
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
ONF/NFB - An Easier Way to Embed Video in Your Blog
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,491

Published on

Problem: Video embed Codes are annoying. Solution: We developed this Wordpress plugin to embed videos with one simple line (the link to the video page). The plugin works with oEmbed-compatible sites …

Problem: Video embed Codes are annoying. Solution: We developed this Wordpress plugin to embed videos with one simple line (the link to the video page). The plugin works with oEmbed-compatible sites like NFB.ca and Vimeo.com. We willl talk a little bit about what oEmbed is, how this plugin works, and how it can help you share films online.

Published in: Technology, Business
2 Comments
2 Likes
Statistics
Notes
  • so 2 guys represents the whole NFB ???

    bonus points if you understand why 'they' don’t want you to see the url in my previous post... :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The link on the slide #5 is incorrect, it should be http://nfb.ca/history/ but they don’t want you to see that apparently. Great work for hiding all thoses messy urls with oEmbed, but there’s (obviously) others ways for creating elegant urls without it. (hint: it’s a Django common mistake for newbies..)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,491
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
2
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×