Video Display in HTML5

BLAH: Previous to HTML5, internet browsers didn't have the technology (codexes>) to display videos. Developers cannot create a single media file which can be displayed across different internet browsers on various operating systems.

So Web page developers forced each end-user to download and install a plug-in> on whatever browser each used.

This is annoying also due to an endless sequence of update nags. Some updates required end users to choose what plug-ins matched specific combinations of operating system and internet browser. Worse of all, because users being inured to forced updates opened up a way for hackers to pose as Adobe to insert malware.

Media coded for Microsoft's Silverlight> cannot display on an end-user machine which only had Adobe Flash installed. Adobe took too long to come up with a plug-in for 64-bit operating systems.

Not only was all this annoying to geeks and frustrating to others, the plug-in ran as an additional thread on the operating system, making all programs slower.

Also, there isn't just one plug-in to install. Several companies each offered their own: Adobe's Flash Player, Apple's Quicktime, Microsoft's Silverlight, Real Video, etc.

Text in the various proprietary formats were difficult for search engines (such as Google and Bing) to process. That's bad for SEO (Search Engine Optimization).

The HTML5 spec leaves DRM (Digital Rights Management) to be handled by each codec within a client media player. The HTML5 spec leaves streaming for each web browser to implement with Browser Extensions such as the one Safari provides to handle streaming.

BLAH: Each browser recognizes a different set of media file encoding formats. Each format requires a different software codec to recognize that format. Each codec has different DRM (Digital Rights Management).

BLAH: So web developers need to create vidoes in several formats, each with a different file extension.

Actually, 4 formats:

1. *.mp4 files are created so that Digital Rights Management (DRM) can be enforced by browsers.

   Thus, Microsoft IE and Apple Safari browsers support only this video format.

   TOOL: HandBrake encodes mp4 files from DVDs not protected by DRM mechanisms.

   Google YouTube, Vimeo, Apple, Microsoft, and other corporate entities each pays a $5 million annual license fee to MPEG-LA for the priviledge of decoding mp4 files to the proprietary H.264 codec which compresses video content. This is so H.264 license violation provides the basis for enfocement by laws like SOPA.

   WIKIPEDIA: AAC (Advanced Audio Coding) is the audio-only counterpart to H.264 as the MPEG-2 standard.

2. *.ogv files (of type *.ogg) are created for open-source browsers (such as Mozilla Firefox) to display.

   For free use without patent restrictions, the Xiph.Org Foundation created the ogg container format to contain Vorbis audio and Theora video based on Matroska and the VP8 video codec Google obtained via acquisiton of On2.

   TOOL: ffmpeg2theora encodes ogv from 720p mp4 and mov> files with commands such as:

   ffmpeg2theora-0.27.exe -o foo.ogv -x 558 --aspect 16:9 -v 9 Source.mov 
   

   Google Chrome browsers support ogg. But Microsoft and Apple do not support the ogg format.

• BlackwaterOpsDotCom explains why H.264 is superior to WebM
3. *.WebM was created by Adobe with Google (for Chrome 6+), Mozilla (Firefox 4+), and Opera (v106+).

   To play WebM media within IE9, run within IE9 the WebM Add-on to IE9.

   To prefer displaying WebM content, specify &webm=1 to URLs such as this:

   
   http://www.youtube.com/results?search_query=trailers&aq=f&hd=1&webm=1
   

   FREE TOOL: ffmepeg for PC based on
   FFmpeg open soure code encodes webm files with commands such as:

   ffmpeg.exe -i Source.mov -s 558X314 -aspect 16:9 -vb 500000 foo.webm 
   

4. *.swf is Adobe flash, for fall-back on older browsers not supporting HTML5.

DO THIS: To show what HTML5 video tags your browser supports and enrolls in YouTube HTML5:

TOOL: http://www.youtube.com/html5/.

HTML5 brings a coding feature to specify multiple source files (rather than a single file) within a new <video> tag:

<video id="my_video_1" class="video-js vjs-default-skin" 
  controls width="640" height="264" preload="auto" 
  loop poster=".../my_video_poster.png" data-setup="{}">
  <source src=".../my_video.mp4" type='video/mp4'>
  <source src=".../my_video.ogv" type='video/ogg'>
  <source src=".../my_video.webm" type='video/webm'>
</video>

The sample HTML5 mark-up above goes anywhere in the <body> section.

Your HTML would replace "my_video" with your own video's file name.

The class="video-js vjs-default-skin" CSS statement references these mimified files needed to be added in HTML <HEAD> section for older browsers:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

.../ in the code above replaces code host URL such as the http://www.merc.tv/... host used on this site, which is a different host (and server) than the website HTML URL (for rendering efficiency).

The reference is to CDN host vjs.zencdn.net run by Zen Coder, contributor Steve Heffernan's employer, which Brightcove acquired.
TOOL: VideoJs.com provides a consistent look between HTML5 browsers via a custom set of controls (HTML/CSS skin and JavaScript API) on top of the HTML5 video element. For browsers that don't support HTML5, Video.js provides a lightweight Flash player.

Use of video.js makes video just work on your web app.

silverlight files are displayed by Microsoft's Silverlight plugin. Since its version 3, it supports playback of .mp4 files encoded using the H.264 codec.

*.wmv - Windows Media Player video format. Displayed on Microsoft browsers before Internet Explorer 7/8.

Encode wmv files using TOOL: Microsoft Expression Encoder 4

Coding for video playback in Internet Explorer 7/8 requires user-agent detection and the Media Player ActiveX object.

<object>
   <embed type="application/x-mplayer2" 
      pluginspage="http://www.microsoft.com/windows/windowsmedia/default.aspx"
      width="558" height="364" src="gizmo.mp4"
      showcontrols="True" showstatusbar="False" 
      showdisplay="False" autorewind="True"
      AutoStart="True">
   </embed>
</object>

*.mov - Apple's Quicktime video format

*.mpeg - Video compression format (specified by the Moving Pictures Experts Group)

W3Schools recommends that to display video in HTML5 with fall-back in older browsers: (preferrably on web pages where users expect to see a video, such as a page which opens after the user clicked on a link to see the video)

<video autobuffer controls                               width="420"   height="344" >
	<source src="foo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	<source src="foo.ogv" type='video/ogg; codecs="theora, vorbis"'
	<source src="foo.webm" type='video/webm;"'
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
                                                            width="420"   height="344">
 	<object data="foo.mp4"                           width="420px" height="344px">
		<param name="allowFullScreen" value="true"/>
		<param name="wmode" value="transparent"/>
		<param name="movie" value="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor="/>
		<embed src="foo.swf" width="320"   height="240" 
			allowFullScreen="true" type="application/x-shockwave-flash" wmode="transparent"/>
		Video not playing? Download mp4 file instead.
		</embed>
	</object>
</video>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" 
	data="http://www.mysite.com/folder/player.swf" width="420" height="344">
<!--<![endif]-->
	<param name="movie" value="http://www.mysite.com/folder/player.swf" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#FFFFFF" />
	<param name="quality" value="high" />
	<param name="allowFullScreen" value="true" />
	<param name="allowscriptaccess" value="always" />
	<a href="http://www.adobe.com/go/getflash">
	<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
		alt="Get Adobe Flash player" />
	</a>
	<param name="flashvars" 
		value="vdo=http://www.mysite.com/folder/myvideo.flv&autoplay=false" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
<div>
	<input type="button" name="play" value="Play" id="play">
	<input type="button" name="pause" value="Pause" id="pause">
	<input type="button" name="stop" value="Stop" id="stop">
	<input type="button" name="skipBack" value="Back 2s" id="skipBack">
	<div id="seek"></div>
</div>

Plain JavaScript to invoke the video:

<script type="text/javascript">
var video = document.getElementsByTagName("video")[0];
video.play();

or

var video = document.getElementById('video');
video.addEventListener('click',function(){
	video.play();
},false);
</script>

jQuery to invoke the video:

$(function)(){
	var video=$('video')[0];
	$('#play').click(function(){
		video.play();
	})
	$('#pause').click(function(){
		video.pause();
	})
	$('#stop').click(function(){ // there is no video.stop() method.
		video.pause();
		video.currentTime=0;
	})
	$('#skipBack').click(function(){
		video.currentTime -= 2; // seconds.
	})
	// Slider:
	$(video).bind('loadedmetadata', function(){
		var seek = $('#seek'), paused;
		seek.slider(}
			min: 0,
			max: video.duration,
			stop: function(event, ui){
				video.currentTime = ui.value;
				if(!paused){ video.play() };
			},
			start: function(event, ui){
				paused = video.paused;
				video.pause();
			}
		});
		
		$(video).bind('timeupdate', function(){
			seek.slider('value', video.currentTime)
		}
	});
})

<track> and --enable-video-track flag

DEMO: This video for Google developers is not just cool for the paper flipbook in it, but the video itself is a good example of providing captions outside the video frame with the HTML5 <track> element and the --enable-video-track flag set or enabled in about:flags in the Latest HTML standards draft.