This tutorial contains videos and code samples to help people write code in accordance to the World Wide Web Consortium’s standards. The W3’s objective is to establish a set of standards or ‘rules’ that everyone should follow if they want to write a web page. Unfortunately there are some browsers that don’t fully support these standards, so the webmaster needs to write code that is still standards compliant, but that also works with every browser…

I wrote this ‘tutorial’ to document the odyssey of writing browser-compatible, standards-compliant code.

Basically, every video can be placed by using object elements (<object></object>), and setting their parameters accordingly using param elements inside the object elements. Alternate text or content, can (and should) be placed after the param elements.

Previously, objects could be placed using the embed element. But, the embed element (<embed></embed>) is now deprecated, which means that it shouldn’t be used anymore… Placing objects using the embed element required attributes with values like ’src’, ‘width’ and ‘height’:

<embed src="http://example.com/absolute/path/to/video.extension" type="some/MIME+type" width="500px" height="400px" someattribute="somevalue">
</object>

When transforming an embed element to an object elements, we can place inside the object element some standard attributes, and we have to pass the non-standard ones as parameters. The resulting structure of an example video would be:

<object data="http://example.com/absolute/path/to/video.extension" type="some/MIME+type" width="500px" height="400px">
   <param name="somename" value="somevalue" />
   You're not seeing the video because you don't have <a href="http://example.com/this/plugin/">this plugin</a>.
</object>

Unfortunately… some old browsers, sometimes have poor support for standards-compliant code. So, this article serves two purposes:

  1. Show how to place some common formats, the Standards Compliant Way.
  2. Hopefully make browser vendors realize that they have to keep up with the ’standards compliance’ fad, because it will stay for a long time on the web…

Now, lets review format by format… and see what we can do to place each format properly, without using any javascript.

You can skip to a specific format’s section by clicking a link from the following list:

avi Format

The first part deals with the avi format. I still haven’t found a way of adding controls to the video in all web browsers… or embedding a player to play this file format, for that matter. I just hope they place another bounty for embedding VLC, and this time… make it come true.

According to the W3Schools, placing an avi can be done by specifying the MIME type as ‘video/avi’, but I’ve found references that have placed the said MIME type as ‘application/x-mplayer2′, or as ‘video/x-msvideo’. Other mimetypes for avi could even be ‘video/msvideo’, ‘application/x-troff-msvideo’, or even ‘video/quicktime’.

Here is the video.

Visit this link for more info

The Janitor evil eyes J.D.

Here is the code.

<object type="video/avi" data="http://www.archive.org/download/Janitor_Evil_Eyes_J.D./ScrubsJanitorEvilEyesJD.avi" width="450" height="430">
   <param name="src" value="http://www.archive.org/download/Janitor_Evil_Eyes_J.D./ScrubsJanitorEvilEyesJD.avi" />
   <param name="autoStart" value="0" />
   <a href="http://www.ourmedia.org/node/153064">Visit this link for more info</a>
</object>

That seems easy to write, right?

Pages: 1 2 3 4 5 6 7 8 9