Archive for the ‘Video’ Category

Changing Video Technologies

Monday, July 23rd, 2012

With the previous post discussing the application of Flash in dynamic web content, I thought I would write about its web video application.
Before the latest generation of browser supporting HTML5, there was no internet standard for internet video. When the HTML 4 standards were drafted in the 90′s, the internet was just too slow to facilitate videos larger than a few megabytes. In addition, there was no standard video format. Microsoft had its Windows Media Video format, and Apple had its Quicktime format, which they jealously guarded, whilst Macromedia had its Flash format, and none of these were particularly cheap to work with for the average person.

Then the internet got faster, and digital cameras started taking videos, and suddenly it wasn’t hard anymore – but nobody had changed the web standards. All the major players simply adapted general purpose html tags (like <object> and <embed>) and made plugins that browsers could use to play their content. Due to its smaller size, and the relatively low cost of animating versus filming, flash found a nice market opening up for it. With the development of their .flv format, Macromedia could also do video – but still none of this was standardised across browsers and platforms. Eventually, open source video formats and editing software began to emerge, such as the OGG format, and video was becoming more widely accessible – now it just needed a proper platform.

The World Wide Web Consortium (W3C) has always striven to reduce user reliance on third party plugins in order to view web content, and so when HTML5 was being implemented, they looked at handling video in a different way. Their approach to this was the <video> tag – a tag that would support different formats like .ogv and .webm and .mp4 (the new version of Apple’s Quicktime format). Browsers didn’t know what format to expect, but they knew a video was between the <video> tags.

All the major browsers in their latest incarnation support at least one <video> format, though not all, but W3C was expecting this, and enabled one <video> tag to source several files –

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

The disadvantage of this method is that you need to upload a different video file for each format you want to include, but the advantages far outweigh the disadvantages. This standardised container comes with its own controls (turned on with the controls attribute) but if you turn these off, javascript can be used to create your own custom controls. The code below (which I wrote for a site currently in development) uses an anchor and the onclick event to control playback of the video, as well as fading the button out of the way when the video is playing.

The javascript:

var vid = $("#presenter")[0];

if (!(Modernizr.video))
	$("#presentButton").attr("href", "UnitaryEngineeringServices.mp4");

else{
	$('#presentButton').click(function() {
			vid.play();
			$('#presentButton').fadeOut("fast");
	});
}

$("#presenter").click(function() {
	if (!(vid.paused)) {
		vid.pause();
		$('#presentButton').fadeIn("fast");
	}
});

and the html:

<div id="present">
            <a href="#" id="presentButton" >Play Our Presenter</a>
            <video id="presenter" <?php /* onloadedmetadata="loaded()"*/ ?>>
              <source src="UnitaryEngineeringServices.mp4" type="video/mp4" />
              <source src="UnitaryEngineeringServices.ogv" type="video/ogg" />
              <p class="error">Your browser does not support the video tag. Click the link above to play the video seperately (Quicktime Required)</p>
            </video>
            <p class="timer"><span class="current"></span>  <span class="duration"></span></p>  
        </div>

As you can probably guess, this means the controls for any video (including the progress bar) can be styled in any way you want to fit in with the scheme of your website. But the potential of the <video> tag doesn’t end there – HTML5 also brought the <canvas> element to the table, and with it, even more possibilities. The <canvas> element allows on-the-fly modification of <video> streams, such as stretching, shrinking, greyscaling, and even chroma-keying (green screen effects). Take a look: http://html5doctor.com/video-canvas-magic/

The <canvas> element also has a lot of other interesting possibilities to explore (both animation and otherwise), but that’s for another post. The introduction of these two elements, and their fast-growing browser support, means that the web’s relationship with video is undergoing a massive change. New methods of using the powerful features of javascript and HTML5 are emerging at a lightning pace, and I expect the release of jquery 2.0 next year will make many of these techniques accessible to the average web developer in the same way jquery gave us simple slider, galleries and the like. Soon, <embed> tag videos may be a thing of the past, and the web will be a better place for it.

Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482