HTML5 for Digital Advertising Resources

Jump to: navigation, search
(Created page with "== HTML5 for Digital Advertising Resource Page == This IAB Wiki is intended to be a supplemental resource to the HTML5 for Digital Advertising 1.0 document and other future de...")
 
Line 132: Line 132:
 
https://typekit.com/ <br>
 
https://typekit.com/ <br>
 
Commonly known foundry of web fonts, but limited tool support. <br>
 
Commonly known foundry of web fonts, but limited tool support. <br>
 +
 +
===Video===
 +
The HTML5 Video section is a resource for finding the updated browser support and streaming delivery technologies available for browsers and devices. Although the working group will periodically update content within these topics, this section is open to any contributor seeking to provide any new or known updates not yet posted.
 +
 +
====Browser Support====
 +
While the HTML5 video element is widely supported among the latest major browser vendors, the video asset itself needs to be transcoded into a few different formats to ensure cross browser functionality. The following section allows you to check the most updated browser support: <br>
 +
 +
'''Desktop:''' <br>
 +
FireFox: Theora/OGG, VP8/WebM (possible future plans for H.264/MP4) <br>
 +
Internet Explorer: <br>
 +
IE8 - No HTML5 Video support use Flash <br>
 +
IE9+ - H.264/MP4 <br>
 +
Safari: H.264/MP4 <br>
 +
Opera: VP8/WebM, Theora/OGG <br>
 +
Chrome: H.264/MP4, VP8/WebM and Theora/OGG (possibly dropping support for H.264/MP4 in future releases)<br>
 +
 +
'''Mobile:''' <br>
 +
iOS - H.264/MP4 <br>
 +
Android*: H.264/MP4 and VP8/WebM (2.3+) <br>
 +
Blackberry - H.264/MP4 <br>
 +
Windows Phone - H.264/MP4 <br>
 +
 +
'''Notes:''' Android's HTML5 video support is highly fragmented between OS versions and devices.
 +
WebM will work in IE9 and Safari provided the user has the WebM codecs installed.
 +
H.264 for older mobile devices requires special video transcoding properties, such as a Baseline profile.
 +
 +
==== Streaming delivery technologies ====
 +
There may not be a standard just yet but there are a few technologies we encourage to use when target ads to specific browsers and devices. The following video delivery technologies intended to reduce the video file weight through transport, but not all are supported by all browsers and devices. Delivery specifications are set to evolve in the coming years with the promise of an industry standard. Since most video delivery through the HTML5 video element is a progressive download from server to client, it's encouraged to keep this information in mind when serving video with higher file size to users on devices tied to a cell carrier, as they're often restricted to a limited bandwidth data plan. <br>
 +
 +
'''HTTP Live Streaming (HLS)''' <br>
 +
Delivery specification by Apple used to segment a video file into smaller transport streams and deliver it to an end user by way of an .M3U8 file. The M3U8 file is a description file instructing the HTML5 video player on how to playback the video segments. Supported in iOS, Safari and Android 3.0+ <br>
 +
 +
'''MPEG-DASH (Dynamic Adaptive Streaming over HTTP)''' <br>
 +
Delivery specification similarly as HLS but its instruction file is an .MPD (media presentation description file). Although not supported in any major browser, it does show promise as a ubiquitous streaming solution in the near future as public support ranges from Microsoft, Adobe and Akamai. While not supported in any major browser just yet. <br>
 +
 +
'''HTML5 Adaptive Bitrate Streaming''' <br>
 +
Emerging video delivery technology that sends segments of a video to a user without incurring the extra overhead of progressively loaded content, it also detects bandwidth constraints of the user and adjusts video playback quality accordingly. Support exists with Apple's HTTP Live Streaming (HLS) specification, and in Safari and iOS  <br>
 +
 +
=== Animation ===
 +
'''Feature Detection for Canvas''' <br>
 +
Feature detection is used to detect whether features built into an HTML ad are supported in the browser, and if not supported, offer an alternate experience that is executable based on supported features. This section provides guidance in the feature support for Canvas in select browsers. Please note that it is not the exact code to run this function, but the practice to perform the feature detection check that is the recommendation within this resource section. <br>
 +
 +
'''Canvas''' <br>
 +
If Canvas is not supported by the user’s browser, the feature detection should provide a fallback user experience. This feature, as well as all new web technology features and functionality can be checked for compatibility on this site: http://caniuse.com/#feat=canvas <br>
 +
 +
'''Explorercanvas''' <br>
 +
The only browser currently without Canvas support is IE versions 6-8. To provide Canvas support to users with older browsers, a workaround called, Explorercanvas (excanvas.js) can be implemented which is an open source JavaScript library that implements the canvas API in Internet Explorer. To use it, we must include the following <br>
 +
<!--[if lt IE 9]> <script src="excanvas.js"></script> <![endif]--> <br>
 +
The JavaScript file can be downloaded here: http://code.google.com/p/explorercanvas/ <br>
 +
 +
'''Note''' Please be aware that this script does not support all Canvas features that may be utilized within any given ad unit and performance can be slow and should be used cautiously

Revision as of 16:28, 12 February 2013

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox