Rich Media Advertising with SVG and JavaScript
1 like1,168 views
This document discusses using SVG and HTML5 video for rich media advertising as an alternative to Flash. It provides a history of rich media ads and examples using Flash. The document demonstrates a prototype rich media ad created with SVG and HTML5 video that performs better than its Flash equivalent. It addresses challenges like a lack of SVG authoring tools and full browser support. The document argues that SVG is more semantic, accessible and an open standard compared to Flash or Canvas. With improved tools and browser support, SVG could become the standard for rich media ads.
Rich Media Advertising with SVG and JavaScript
- 1. Rich Media Advertising with SVG and JavaScript Introducing SVG and HTML5 VIDEO element to the mainstream advertising Gjokica Zafirovski (@gjolesuns) SVG Open 2009
- 2. Overview What is Rich Media Advertising? Authoring SVG vs Flash SVG vs Canvas Facing problems The good news Workflows (back to authoring) The future
- 3. Rich Media advertising history 1994 HotWired invented the online advertising model 1996 Hewlett Packard partnered with San Francisco-based online agency, Red Sky Interactive, to produce what is now regarded as the worlds first interactive rich media banner ad. Produced in Macromedia Director. Java Applets JavaScript early attempts Macromedia Shockwave Player Macromedia Flash Player FLV - Flash video Adobe Flash Player 10
- 4. Rich Media ad examples http://www.doubleclick.com/insight/gallery/examples/the- sims-3.asp http://www.doubleclick.com/insight/gallery/examples/volvo- xc60.asp Questions: Is it accessible? Is it reusable once created? Is it CPU / Bandwidth hungry? How big are those files? How much does it cost to produce one of this?
- 5. Rich Media Authoring Applications Adobe CS Adobe Flash Video Production Apps
- 6. Why Flash is ahead and SVG is still behind? SVG and Web Standards move too slow, propriety software move faster Modern Browsers (a.k.a. FF and Webkit) - only recently started to support SVG natively with more advaned features implementation. IE - we still have to hack it to make it work with this technologies and use the old-school plug-in work around or wait for the big industry players to distribute this solution Luck of professional authoring tools
- 7. Why SVG will be better? Accessibility Semantics Open Standard Web Development Environments Unit Testing UI QA (Selenium) Maintenance
- 8. Rich Media Creative Prototype with SVG and the VIDEO element http://svgopen.sunsblog.net/svg.html
- 9. Rich Media Creative with Flash (SVG Equivalent) http://svgopen.sunsblog.net/flash.html
- 10. Creatives performance (Flash) 6.87s
- 11. Creatives performance (SVG) 2.15s
- 12. Why SVG over CANVAS? Accessibility Semantics Web Developers familiarity with web standards
- 13. Facing problems No SVG based authoring tools for the masses. Not everyone is engineer or web developer. Designers, main force behind online advertising creativity and solutions, like to draw and paint, not code. There are some authoring tools, like Inkscape (very powerful but with no time based animation features), as free alternative to Illustrator. Adobe Flash is offering everything needed for rich media authoring, and established as standard in the advertising world. Production of ads can be very expensive if you hire only engineers (with no design and media skills) to produce SVG/JavaScript based ads.
- 14. The Good News SVG "foreignObject" is here to save the day. You can insert the HTML5 VIDEO element and add all video player scripting: <g transform="translate(418,10)"> <foreignObject width="300" height="240"> <video autobuffer="autobuffer" width="300" height="240" id="dilbert" xmlns="http://www.w3.org/1999/xhtml"> <source src="dilbert.mp4" type="video/mp4" /> <source src="dilbert.ogv" type="video/ogg" /> </video> </foreignObject> <rect x="0" y="240" width="24" height="24" fill="blue" stroke="none" onclick="document.getElementById('dilbert').play()"/> </g>
- 15. Tools I'm sure there are plenty more in the wild, but I find this selection very useful and promising: Desktop Inkscape (http://www.inkscape.org/) Web SvgEdit (http://code.google.com/p/svg-edit/) APIs Raphael (http://raphaeljs.com/) jQuery SVG Plugin (http://keith-wood.name/svg.html) SVG Web Toolkit (http://code.google.com/p/svgweb/)
- 16. Video encoding Video authoring services will need to encode web videos in MP4 (Safari, Chrome) and Theora Video OGV (Firefox, Chrome) so the video can be played using the HTML5 VIDEO element. Encoding software I used for the Dilbert video in the prototypes are: MP4 HandBrake (http://handbrake.fr/) (desktop app - Windows, OS X, Linux) OGV FFmpeg2theora (http://v2v.cc/~j/ffmpeg2theora/) (command line app - Windows, OS X, Linux)
- 17. Browser support !!! Desktop SVG support for all browsers is here (well, almost all - IE is not supporting it, but there is a way around it). There is no excuse today not to make SVG an advertising standard. See the link below for detailed browser support: http://a.deveria.com/caniuse/#agents=All&eras=All&cats=SVG, Canvas&statuses=rec,cr,wd,ietf Mobile iPhone (good, foreignObject supported, but not with video) Android (No) Palm Pre (No) Symbian (SVG Tiny 1.1 - not applicable for rich media advertising, but applicable for standard ads) Windows Mobile (No)
- 18. Accessibility Grouping constructs, when used in conjunction with the 'desc' and 'title' elements, provide information about document structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility. http://www.w3.org/TR/SVG/struct. html#DescriptionAndTitleElements
- 19. The if(Future) If IE is sorted, there will be no breaks to implement SVG as mainstream rich media advertising platform. There are workarounds, but we would like to see native support, ideally. If we develop professional authoring environments, SVG will be adopted by the advertising services industry.
- 20. Conclusion Yes, it is possible to design and create SVG rich media ads with video. You saw the working prototype. It works. Yes, we still have lots of work to do by providing authoring tools and updating existing or create new ad serving platforms. Yes, we need new funky name for all this "a la AJAX". SADE - SVG Authoring and Design Environment SWAN - SVG Web Authoring eNvironment
- 21. THANK YOU! @gjolesuns gzafirovski@google.com