Your SlideShare is downloading. ×
0
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
Blue Angels Case Study
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

Blue Angels Case Study

1,412

Published on

Presented at HTML5 Video Summit - November 2011 by Tony Walt

Presented at HTML5 Video Summit - November 2011 by Tony Walt

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

  • Be the first to like this

No Downloads
Views
Total Views
1,412
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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
  • Tony Walt Director of 3D and Motion Design == My team is responsible for == Planning, Creation, Implementation of media across EUI projects Today – use of HTML5 Video – Navy Blue Angels Hashtag EffectiveUI @tonyjwalt
  • User Experience Agency Build applications focused on users Improving digital interactions Enhancing emotional engagement with companies and their brands
  • One group we had pleasure to work with Flying aerobatic team established in 1946 To enhance the Navy and Marine Corps recruiting and credibly represent the Navy and Marine Corps aviation Inspire potential recruits, fellow service members, American tax payers Done through amazing flight demonstrations –millions spectators a year, At airshows fly low altitudes (50 feet above the ground), tight formations (18 inch apart), and speeds (solos just under speed of sound) Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Flying aerobatic team established in 1946 To enhance the Navy and Marine Corps recruiting and credibly represent the Navy and Marine Corps aviation Inspire potential recruits, fellow service members, American tax payers Done through amazing flight demonstrations – 14 million spectators a year, At airshows fly low altitudes (50 feet above the ground), tight formations (18 inch apart), and speeds (solos just under speed of sound)
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Original site provided information, but not inspiring, didn ’t elicit the emotional response
  • Wanted to help, partnered with us Build site that extends their flight demonstration beyond the airshow to a wider audience and enhances that experience. Homepage was the primary point for HTML5. Let ’s take a look at that.
  • ====What you are looking at==== Animated UI (CSS3 Transforms, JS) Custom Loader - Audio player (Canvas, JS) Background video/audio (Video/Audio Tags) ====Why did we do this?==== Get people excited, draw them in. Will impact the rest of the experience Tie it to the Feature pages (Silverlight) Why not in Feature sections – Entry vs. Destinations within the site (IIS) ====Why HTML5==== Background element – no plugin prompts
  • NonHTML5 browsers Mobile – resolutions, inline playback , bandwidth, data plans (cost) progressive enhancement – baseline, then video Just delivered image
  • Inconsistent Playback - Injecting the video tag (stuttering) verse removing on detection
  • Supported was not standard. CSS3 Transforms behaving differently
  • Encoding Video - Mp4, OGV, WebM video size (baseline 12.7MB, MP4 high profile 6.38MB) Audio (MP3, OGG – 534KB) verse Wav (6MB)
  • Video Ripping – some animated elements delayed until after video
  • Browsers released while making the site: IE9, Firefox 3.5 & 3.6 Lots of testing
  • Event Model – Firefox 3.5 “ended” event and looping, “progress” events (videoJS)
  • Atypical use – had to work with videoJS to play correctly
  • Results: =================== Site Visitors More than doubled Time on site went through the roof (mostly video)
  • Transcript

    • 1. Blue Angels Web Site <ul><li>Use of HTML5 Video </li></ul>
    • 2. Tony Walt <ul><li>Director of 3D and Motion Design </li></ul>Tweeting: @tonyjwalt, #effectiveui
    • 3. EffectiveUI <ul><li>User Experience Agency </li></ul>
    • 4. Blue Angels <ul><li>Flying aerobatic team </li></ul>
    • 5.  
    • 6.  
    • 7.  
    • 8.  
    • 9.  
    • 10.  
    • 11. Microsoft & EffectiveUI <ul><li>Build a better site </li></ul>
    • 12.  
    • 13. Challenges <ul><li>Non-HTML5 Browsers & Mobile </li></ul><ul><li>Inconsistent Playback </li></ul><ul><li>Encoding </li></ul><ul><li>Video Ripping </li></ul><ul><li>Building for Beta </li></ul><ul><li>Event Model </li></ul><ul><li>Atypical Use </li></ul>
    • 14. Non-HTML5 Browsers and Mobile
    • 15. Video Ripping Inconsistent Playback
    • 16. Animations Inconsistent Playback
    • 17. <ul><li>Video Formats </li></ul><ul><ul><li>WebM, OGV, MP4 </li></ul></ul><ul><li>Audio Formats </li></ul><ul><ul><li>MP3, OGG </li></ul></ul><ul><li>Encoders </li></ul><ul><ul><li>Adobe Media Encoder </li></ul></ul><ul><ul><li>Handbrake (X264) </li></ul></ul><ul><ul><li>XMedia Recode </li></ul></ul><ul><ul><li>Firefogg </li></ul></ul>Encoding
    • 18. Video Ripping
    • 19. Building for Beta
    • 20. Event Model
    • 21. Atypical Use
    • 22. Results <ul><li>Site visitors more than doubled </li></ul><ul><li>Time on site went through the roof – due to video </li></ul><ul><li>Link: www.blueangels.navy.mil </li></ul>
    • 23. Thank you.

    ×