HTML5 Tutorial - Multimedia Before HTML5 - 2020

In this chapter, we're going to review the techniques related to the multimedia on the web before we have HTNML5. So, it's about the multimedia with HTML4.

As we already know, one of the major advantages of the HTML5 video element is that video is a full-fledged citizen on the Web. Now, <video> elements can be styled with CSS. They can be resized on hover using CSS transitions. They can be tweaked and redisplayed onto <canvas> with JavaScript. Also, <embed> is finally standardized in HTML5. It was never part of any previous flavor of (X)HTML.

Best of all, the innate flexibility that open web standards provide is opened up. Before HTML5, all our data was locked. Now, however, we can freely manipulate the data whatever we want.

Anyway, HTML4 is still everywhere and widely used, I think, it's still worth reviewing the HTML4's multimedia.

A browser is an application with limited capability of playing multimedia. It can show text and images. But there are quite a few different types of files round the web including video, auto, PDFs, Flash, and so on.

To display or to play these types of files, a browser needs help from the application called players. The players are stand-alone that function as separate programs on the visitor's computer as well as plugin players which can work inside the browser.

There are two ways of playing them:

1. When we link to a multimedia file, that file is opened in an external player.
2. When we embed a multimedia file, the file is opened in the plugin within the browser itself.

Common plugins are:

1. Flash/Shockwave Players from Macromedia
2. QuickTime Player from Apple
3. Windows Media Player from Microsoft
4. Acrobat from Adobe

When a browser encounters a file it can't open on its own, it starts to look for a player or a plugin on the client computer. On most browsers, if the client has an appropriate plugin installed, the multimedia file will be opened in a new window with an embedded player. If the client does not have an appropriate plugins but does have a player, the linked file in opened in the external player. And if there is neither a plugin nor a player available, most browsers will let visitors download the file and/or choose another program with which to open it.

Before HTML5, if developers wanted to include video in a web page, they had to use the object element, which is a generic container for foreign objects. However, due to the browser inconsistencies, they would also need to use the invalid embed element and duplicate many parameters.

Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types are supported by the embed tag.

1. .swf (ShockWave Flash)
   file types created by Macromedia's Flash program.
2. .asf, .wmv, .wm, .wma
   Microsoft's Window's Media file types.
   1. Advanced Systems Format (.asf)
   2. Windows Media Video (.wmv, .wm)
   3. Windows Media Audio (.wma)
3. .mov, .qt
   Apple's Quick Time Movie format.
4. .mpg, .mpeg, .m1v, .mp2, .mp3, .mpa, .mpe, .mpv2, .m3u
   The Moving Picture Experts Group develop the Moving Picture Experts Group (MPEG) standards. These standards are an evolving set of standards for video and audio compression.

The listings above are the most commonly used formats for the internet. .mpeg files and Macromedia's .swf files are the most compact and widely used among the internet.

There are two primary elements used to embed multimedia on a web page: object and embed.

The embed element stared out as a Netscape extension and is not a part of the (X)HTML specifications. Any page that contains it is not considered valid. However, it continues to be generally supported.

On the other side, we have the W3C's object element as an official component of HTML4 and XHTML 1.0.. But IE implements the object in a way that makes other browsers ignore it - in order to use its ActiveX controls. On top of that, IE does not completely support the object element itself, failing - as the (X)HTML specifications require-to look for nested objects that it can support when the outer object proves too difficult.

The solution historically has been to offer IE and object element in the non-standard way that it requires for its ActiveX controls while at the same time nesting a non-standard embed element within the object element that the rest of the browser population can handle.

We're going to use nested object and if statement for IE to address the mixed situation (using embed within object).

Internet Explorer (IE) uses the standard object element in a non-standard way that it makes all other browsers ignore it. The object element, however, is intended as an all-purpose tag to embed external files into web pages. It has clever features such as being able to be nested, so that if a browser does not understand what is meant by the outer element, it can parse the inner element instead. This means that the inner most element could contain an image, which would be rendered to the user if all else fails.

So, we should be able to use the outer object for IE and an inner one for other browsers. But IE gets this wrong too. IE does erroneously display two objects element, both inner and outer. The solution is to hide the nested elements from IE using conditional comments:

<!--[if !IE]>-->
...
<!--<![endif]-->

Here is the html code:

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="//www.apple.com/qtactivex/qtplugin.cab" width="320"
height="260">
    <param name="src" value="http://www.bogotobogo.com/HTML5/images/files/mov_sample.mov" /> 
    <param name="controller" value="true" /> 
    <param name="autoplay" value="true" />
<!--[if !IE]>-->
<object type="video/quicktime" 
	data="http://www.bogotobogo.com/HTML5/images/files/mov_sample.mov" 
        width="320" height="260">
        <param name="autoplay" value="true" />
        <param name="controller" value="true" />
        <param name="bgcolor" value="#EBF4F3" />
        </object>
<!--<![endif]-->
</object>

If we just want to link it:

<a href="http://www.bogotobogo.com/HTML5/images/files/mov_sample.mov">mov_sample.mov</a>

We can adjust the size of a QuickTime movie:

<param name="scale" value="factor" />

The factor is:

1. tofit When we want the movie to be reduced or expanded to fit its box.
2. aspect When we want the movie to be reduced or expanded to fit its box while maintaining its original proportions.
3. n n is the number with which the original height and width of the movie will be multiplied to get the final height and width.

We can also change the background color of a QuickTime movie:

<param name="bgcolor" value="color" />

We can also make a QuickTime movie to loop :

<param name="loop" value="true" />

Microsoft likes us to embed Windows Media with the classid attribute that calls the ActiveX control. But because the classid attribute is non-standard, it causes other browser to ignore the object. Therefore, here, we'll use a standard-compliant way of embedding Window Media files that works on all major browsers.

<object type="video/x-ms-wmv" data="http://www.bogotobogo.com/HTML5/images/files/wmv_sample.wmv" width="320"
height="260" >
<param name="src" value="http://www.bogotobogo.com/HTML5/images/files/wmv_sample.wmv" />
<param name="autostart" value="false" />
<param name="controller" value="true" />
<param name="qtsrcdontusebrowser" value="true" />
<param name="enablejavascript" value="true" />
<a href="http://www.bogotobogo.com/HTML5/images/files/wmv_sample.wmv">Windows Media Video Sample</a>

.wmv (Windows Media Video)

.wma (Windows Media Audio)

.wav (Audio for Windows )

.mpeg (Moving Picture Experts Group)

Flash is an animated image format from Macromedia (Adobe) that is widely used on the web.

Many people use a combination of object and the non-standard embed tag to insert Flash on a web page.

<object type="application/x-shockwave-flash"
data="http://www.bogotobogo.com/HTML5/images/files/swf_sample.swf" 
width="300" height="240">
<param name="movie" 
value="http://www.bogotobogo.com/HTML5/images/files/swf_sample.swf" />
</object>

Or just a link: