Video with Third-Party Plugins
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.
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
|Native UI||Custom UI|
<div class="video-wrap flex-center"> <h2>Native <video> 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 <video> 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.
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.