ONF/NFB - An Easier Way to Embed Video in Your Blog
•
2 gostaram•4,267 visualizações
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.
Recomendados
Mais conteúdo relacionado
Último
Último (20)
Destaque
Destaque (20)
ONF/NFB - An Easier Way to Embed Video in Your Blog
- 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>
- 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
- 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à!
- 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/&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>
- 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