Comic Director - Deliver Videos Easier with the HTML5 Video Element

Anyone browsing the web or using web-based applications today will know that you can embed video on a web page or within an app. Less known are the recent revisions to the HTML5 specification that have brought us closer to developing a standard way to easily embed video on the web. The HTML5 <video> element helps you deliver and embed video content on the web and in applications with less reliance on third-party plugins like Flash and QuickTime as well as reduce the need for JavaScript-based players. While still evolving, the HTML5 <video> element supports many modern video formats and codecs, but not yet all browsers. Luckily, there are many alternatives and backup options you can use to make sure your video content gets delivered to as many users as possible.

Video with Third-Party Plugins
Video on the web has almost always been delivered using third-party plugins like Flash or with JavaScript video players. While reliable in most cases, there are still problems that can occur. The code itself is typically much longer and more complicated when using Flash or JavaScript, and playback performance can vary from system to system. Many mobile devices currently do not support Flash video, which prevents viewers from watching video content.

The code sample below demonstrates a Flash-based approach to embedding video into a web page or HTML5-based application. The code is longer and lacks clear descriptive code language and video playback performance can vary depending on platform and implementation.

<object classid="movie" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/watch?v=TmW5LX2bkQE" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/watch?v=TmW5LX2bkQE" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

Containers and Codecs
With the HTML5 <video> element, there are three main video formats currently supported: MP4, WebM, and Ogg. Some browsers only support one of these three formats, so you may want to include all three file types of a single video asset in order to ensure the largest number of users can view your content.

Source: http://blog.encoding.com/wp-content/uploads/2010/09/html5video_shipping.jpg

Intel® Quick Sync Video is a great tool for converting video into a variety of formats very quickly. Intel Quick Sync uses dedicated hardware on 4th generation Intel® Core™ processors for fast, power efficient processing.

The HTML5 <video> Element
Below is an example of the markup you would use to embed the same video as the earlier Flash-based example.

<video poster=" http://comicdirector.com/img/CD_Logo.png " controls tabindex="0">
	<source src=” http://www.youtube.com/watch?v=TmW5LX2bkQE” />
	<source src= “movie.mp4” type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
	<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
	<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support HTML5 video. Please update your browser to watch this video.
</video>

There are several properties you’ll want to know about when working with the <video> element in your HTML5 applications. The “poster” property lets you choose the image that appears in the window before the user presses play. The “controls” property tells the browser to render playback controls. The “src” property is where you designate the video content that is available to display. Again, different browsers support different video types so you’ll need to reference multiple video files, one for each supported format. You can include a Flash backup option for older browsers that do not support HTML5 video playback, but unless you are trying to support Internet Explorer 8 or older browsers, it’s not worth the effort. Instead you can put a message inside the video tag informing users with old browsers that they need to upgrade their browser to watch the video.

Build a Custom UI for HTML5 Video Players
The default look of an HTML5 video player object is browser dependent; however, it is possible to scale, rotate, resize and re-skin the video player using standard JavaScript and CSS techniques. Below we will re-skin the video controls with our own design.

Custom player control UI with CSS and JavaScript

First, you need to hide the existing video controls by removing the “control” property of the <video> element. Then you can add new button controls and style them using CSS. And to finish it off, use JavaScript to make your video button controls work.

Native UICustom UI
<div class="video-wrap flex-center">
<h2>Native &lt;video&gt; Controls</h2>
<video
src="video.m4v"
poster="video_poster.png"
controls
class="radial-bg"
id="native-skin"
preload
loop
height="270px"
width="480px"></video>
</div>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"></link>
 
<div class="video-wrap flex-center">
 
<h2>Custom &lt;video&gt; Controls</h2>
<video
src="video.m4v"
poster="video_poster.png"
class="radial-bg"
id="custom-skin"
height="270px"
width="480px"></video>
 
<nav class="flexbox flex-button-bar">
<a id="play"><i class="icon-play"></i></a>
<a id="mute"><i class="icon-volume-up"></i></a>
<a id="fullscreen"><i class="icon-fullscreen"></i></a>
</nav>
</div>

The HTML5 <video> element is easy to use and more flexible than using Flash videos (which won’t run on many mobile devices).  The <video> tag is still evolving—be sure to double-check what is and isn’t supported by your target browsers and devices. Future advancements of the HTML specification could lead to more <video> tag capabilities like full screen view and access to peripherals like cameras and microphones. One thing is certain: the <video> tag is quickly becoming the best way to integrate video on the web and web applications.

Learn more about web application development at the Intel Developer Zone. Check out the new HTML5 Development Environment and look at code examples at the HTML5 Playground.

Intel HTML5 Development Environment:
The XDK is the world’s first HTML5 powered mobile application development tool. With it, you can create, debug and build customized, robust HTML5 apps in hours, and the XDK runs on either Mac or PC Platforms. Build hybrid HTML5 apps for iOS, Android, Windows 8 and Tizen tablets and smartphones, as well as HTML5 web apps for Facebook, Google and other hosting platforms.
software.intel.com/html5tools

Intel HTML5 Playground:
The HTML5* Playground provides developers with a web based code editor, a live application preview window, and a library of sample code and snippets to use as starting points.  Anything you that you create, can be shared using a permalink.
software.intel.com/appup/html5-playground

Para obter mais informações sobre otimizações de compiladores, consulte Aviso sobre otimizações.