standards compliant video player

In the last few years I have gone from bein an extreme amateur when it comes to html and css, building a site built on table based layouts to someone who fancies himself an xhtml and css standards geek who is sometimes recruited by friends to write code or fix code they have problems with. When I say standards geek, I mean extreme geek, in fact my new site I am coding as XHTML strict which can be extremely hard to conform to but I will make it so.

With that said, nothing annoys me more on the net than going to youtube, revver, vimeo, jumpcut, etc, etc, and not getting standards based code. Now I understand why they give me this code, its for legacy purposes but that is no good to me, in the world of firefox, opera, and safari we can finally abandon poorly done broken code for fully compliant standards based clean markup, heck it is even possible in internet explorer 7. The only drawback being that due to the quirks of the past this fully compliant code will in fact break in legacy browsers.

With all that said converting old broken legacy code into clean markup is extraordinarily simple, heck I was able to handle it after maybe 15 minutes and if theres two things I don’t know as well as I would like in XHTML its this and forms. That however is purely do to lack of experience, and nothing to do with knowledge or skill and the same can be said for anyone into standards who might be a little intimidated/inexperienced with certain markup.

First let’s take a look at the code below which is provided by the fine folks over at comedy central.

<embed FlashVars=’videoId=148027′ src=’http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml’ quality=’high’ bgcolor=’#cccccc’ width=’332′ height=’316′ name=’comedy_central_player’ align=’middle’ allowScriptAccess=’always’ allownetworking=’external’ type=’application/x-shockwave-flash’ pluginspage=’http://www.macromedia.com/go/getflashplayer’></embed>

All of the code above is broken, well it will work, but its broken as far as standards. The embed tag has been deprecated and if you want to strive for standards it must be abandoned, thats not to say the code can not be utilized, reworked, and turned into standards compliant code all while still appearing and working the same as the original. So working left to right through the above code we can methodically build the new code, the first step is using the object tag, where the embed tag is a relic of the past the object tag is a tag of today and tomorrow (it even replaces the img tag in xhtml 2).

First of all wrap your code inside of an opening and closing object tag, the way I start my code to maintain its integrity is to always begin with the opening and closing tags. The next piece of our code is the FlashVars element, which is used to identify the particular video that comedy central is serving up, it can not be placed as an element of the object tag but it can be used inside of the object tag in the form of a param tag. An empty param tag has 3 elements, the tag title, in this case param, the name element, and the value element. So at this point your code that does nothing would look like this.

<object>
<param name=”" value=”"/>
</object>

Now back to the FlashVars element, and this can be used for any element that needs to go into a param tag, everything to the left of the equal sign goes into the name tag and everything inside of the quotes goes into the value tag.

The next element is the src tag and it has a distinction of needing to be both a param and an element of the object tag, it doesn’t have to be but I have noticed the tag is more portable (at least in my experiences) when this is redundant (it seems to help ie7). The src tag and the address inside of it remains the same in every way when used inside of the object tag with only one change, it is now data and not src. Now for the param portion, the name portion of the tag is movie and the value is simply the address used inside of the embed tag. So now your code should look like this:

<object data=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml” >
<param name=”movie” value=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml”/>
</pbject>

The remaining tags can all be thrown inside of param tags except for type and name which can be simply thrown into the object tag with data, I usually leave out the pluginspage element just because, and I usually change the bgcolor width and height elements out for a css rule which means I then have to add in a css hook which in this case I would name something like comedycentralplayer, or whatever you would like. For the purposes of this post however I will add both the selector name and inline css style and as such the finished compliant code will look like the following.

<object type=”application/x-shockwave-flash” class=”comedycentralplayer” style=”background-color: #cccccc; width: 332px; height: 316px;” data=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml” name=”comedy_central_player”>
<param name=”movie” value=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml”/>
<param name=”FlashVars” value=”videoId=148027″/>
<param name=”quality” value=”high”/>
<param name=”allowScriptAccess” value=”always”/>
<param name=”allownetworking” value=”external”/>
</object>

Like I said before though this code will break in old browsers so I would think you should add something known to any good xhtml coder, and that is alt text. But if you look at the code above you will say there is no space for alt tags, and you would be right of course in that there is no explicitly stated alt element, but there is a place for it. If you had just empty object tags everything that was placed inside of them that was not wrapped in a param tag would be non printing text when the object worked, but when it did not it would work the same as alt text or noscript text, alerting the user that what is supposed to be there, is not there after all. So with that in mind your code would look something like this, except you might want to make it appear all on one line, otherwise the code could behave strangely in some environments:

<object type=”application/x-shockwave-flash” class=”comedycentralplayer” style=”background-color: #cccccc; width: 332px; height: 316px;” data=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml” name=”comedy_central_player”>
<param name=”movie” value=”http://www.thedailyshow.com/sitewide/video_player/view/default/swf.jhtml”/>
<param name=”FlashVars” value=”videoId=148027″/>
<param name=”quality” value=”high”/>
<param name=”allowScriptAccess” value=”always”/>
<param name=”allownetworking” value=”external”/>
If you’re seeing this something obviously broke, it could be your browser or you may lack the appropriate plug in, I can’t say but if you were running <a href=”http://www.getfirefox.com”>firefox</a>, with an up to date <a href=”www.adobe.com/products/flashplayer/”>flash player</a> I know you wouldn’t have this problem, if you are seeing this still though I bet it’s a problem with the video’s host and not myself, thanks.
</object>

Your finished code would in turn allow for a fully standards compliant version of the original broken code playable in any standards compliant browser as you can see below (provided comedy central doesn’t move their player).