Posts Tagged ‘html5’

HTML5 & < Video>

Written by jbriccetti on . Posted in App Dev, Misc Ramblings, Mobile, Strategy

Why Now?

At the crossroads of today’s internet experience, we see a convergence of html5, social media, video and a multitude of web enabled devices. The day for all these elements has come  and they are all, equally affecting the web of tomorrow.

The internet has brought us a culture transformation, away from the world of “restrictive” business and social models. Think about real estate & media moguls – giants who monitized information via exclusive rights and limited access – these industries are nothing like they once were. Today, easy discovery, unlimited access and free distribution are the underlying principles of the “inclusive mindset” that closes the gap between content and audience.

HTML5 <video> tag brings a much needed standard to the web. But more importantly it is the opportunity for moving pictures to have it’s heyday on the internet. The benefits?

  • A broader reach: 50%+ of all internet traffic is video; 60%+ of all mobile data is video. 
  • Mega-stickiness: video shows the full range of human emotion and context, the result of which is better communication & faster calls to action.
  • Better content, better context: relatedness via metadata and transparent content density improves the quality of discovery; “Deeper” content, faster and easier.
  • Viral distribution: Social media “pushes” make discovery easier – we no longer have to find content, it find us. Brightcove reports that it’s 2nd biggest referrer of video content is Facebook.

Timing is everything. The success of social media,  the expectations of html5 standards, the proliferation of devices have converged at a time when a new, open mindset creates opportunity like never before. Video is ripe on the vine.

Strategy

Creating and managing optimized video content is critical; Video content production is different than authoring text content. Social media goals are to raise awareness and leverage viral distribution. Core content is for engagement and information distribution. Managing metadata and creating “relatedness” are critical elements of a successful game plan.

Distribution strategy is multifaceted. Viral distribution is powerful yet uncontrollable. Managed syndication via MRSS or syndication partnerships improves reach even further and with more controls. Both vehicles improve inbound links and drive better SEO.

Often overlooked, Analytics is as important as any other part of your strategy. Without metrics for engagement, distribution, content and device support, you have no idea where your successes and failures reside.

Finally, player ubiquity is the most important technical piece of the strategic puzzle. <html5> brings us the hope of a future emerging standards. File formats (codecs) and device support is far from standardized. Much like the browser wars of 2001, 10 years later we are seeing the device wars play out, especially in the video space. Your technical solution must address all devices to fully leverage all that video has to offer.

Some interesting statistics:

  • The average web user watched 75% more video in 2010 than in 2008
  • By 30 seconds into an online video up to 33% of viewers have moved on; at 1 minute 44% have left (regardless of the clip’s length) and almost 60% have abandoned by the 2 minute mark. [source]
  • More than 16 Million mobile users in the U.S. watched TV or video on their mobile phone in Q2, 2011
  • Every second, 1 million minutes of video content will cross global IP networks in 2015. That would take a person 5 years to watch. [source]

Myth-busting html5 <video>

 The Promise

  • No fragmentation – higher success factor with scalable, manageable solutions
  • No need for plugins, 3rd party tools or proprietary solutions.
  • Better performance – native functionality
  • More culturally aligned with the web – open & free standards

The Reality

  • The functionality is standardized, the implementation isn’t
  • War of the codec standards
  • Reliance on Plugins (Flash) for fallback

Implementation

  • Make one version of your video in WebM (VP8+Vorbis)
  • Make another version in H.264 +AAC audio in an mp4 container
  • Make a third version in theora + Vorbis in an ogg container
  • <video> embed with a fallback on flash

Why Bother?

  • Devices. If you care at all about reaching the mobile marketplace, html5 video is a must.
  • Lead, don’t follow –  be a part of setting the standard. The sooner you get started, the better off you’ll be when it matures.
  • Potential – html5 <video> is where flash was 10 years ago – on the precipice of explosive growth.
  • It’s worth it – any bumps are outweighed by video’s extended reach.
  • SaaS Solutions – you don’t have to DIY.

Resources:

Example using VideoJS Plugin for wordpress:

All i had to do was add the code like this (it doesn’t matter if you enter it in using visual or html mode, either way the plugin picks it up:

 [ video mp4="http://video-js.zencoder.com/oceans-clip.mp4" ogg="http://video-js.zencoder.com/oceans-clip.ogg" webm="http://video-js.zencoder.com/oceans-clip.webm" poster="http://video-js.zencoder.com/oceans-clip.png" preload="true" width="640" height="264" ]