skip to content →

Posts Tagged ‘coding’

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).

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 , with an up to date flash player 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.

01.31.08 read more »

stupid scripts

When uninstalling and reinstalling my copy of portable firefox (great browser btw), I came across an old web page I had done to create a couple of stupid scripts, the inspiration being this post by Leah Culver, and Leah if you read this and you won’t, pownce isn’t perfect but you’re edging it towards perfection.

Anyways I wrote three bad pieces of javascript, one to make it appear that the page is typing to you, one that makes it appear that the title of the page is being typed out and one that simply blinks the title as a means to annoy you.  None of these serve any purpose but I didn’t want to forget my contribution to the world of stupid scripts so I figured I would post it here.

First of all i wanted to explain the global variables:  string is simply the text to be echoed in some way,  stringPortion is used to hold the portion of the text to be typed out (it’s not used in the the function echoTitle), count should probably be named something else but it is used to keep track of where you are at in the string when typing it out, and titleCount is used in the blinking title function as a means of remembering if the title is blank or not, I could have done that without a variable but when I wrote this I didn’t know as much as I know now as I was taking my first javascript course so I didn’t know the DOM at all, compared to the little I know now.

var string = “hello world”;
var stringPortion = “”;
var count = 0;
var titleCount = 0;

Now that you know the variables I will just post the functions, like I said they’re stupid scripts so they aren’t at all complex, heck none of them even take in any parameters they’re so quick and basic.

function echoString()
{
stringPortion = stringPortion + string.charAt(count);
document.getElementById(’stringTest’).innerHTML = “<h1>”+stringPortion+”_</h1>”;
count++;
setTimeout(”echoString()”,250)
} // end function

function animateTitle()
{
stringPortion = stringPortion + string.charAt(count);
document.title = stringPortion+”_”;
count++;
setTimeout(”animateTitle()”,250)
} // end function echoString

function echoTitle()
{

if(titleCount == 0)
{
document.title = string;
titleCount++;
setTimeout(”echoTitle()”,800)
}
else
{
document.title = “”;
titleCount–;
setTimeout(”echoTitle()”,800)
}
} // end function

10.01.07 read more »

fother mucker

As a matter of principle I refrain from identifying in any way those above me who have screwed up when posting on here. It’s not to protect them but rather to protect me since I still work there. This will be a very tough one to act principally on.

Here’s the deal, I am taking one course right now while working at my school and looking for a new job, speaking of which I need to post a resume on the appropriate sites in the next few days, so all in all it is simple for me to keep my school work straight and get assignments done in a timely manner.

Or it would be if it were possible this time around. The way things go in this course the teacher posts an unfinished bit of code and your assignment is to finish it, which I have done. I have yet to turn anything in because I will show them to him at the time of the first test which is entirely acceptable to do. Only problem is, the current assignment requires him to show last weeks assignment to the class and since not everyone may have completed it he is not posting it rather he is sending it out upon receiving the prior weeks work.

If he had posted this last week so I could have sent in my work in a timely manner this would be fine, but he did not do this and as such here I am. He posts the new assignment on a Saturday which for one is entirely inconvenient for anyone, and since we must message him, most likely no one will get the needed files until Monday. That is not even mentioning the fact that we have a test to study for.

Now this is an advanced class and I am sure I can handle the work and get it done, and in all honesty I don’t have a bitch about how he decided to assign the work, what I am complaining about is that he gave no warning that he was deviating from the routine. If he had then we could have prepared for this and as such we could have the maximum time available to complete the new work.

Now if you have made it this far I thank you for following my scattershot ramblings… but theres more whining to come

09.29.07 read more »

everytime you think you know everything

Life can be a jerk sometimes, case in point my just now discovering what the clear property does in css.

Without getting bogged down in semantics, my old theme that I abandoned because I couldn’t make the sidebar and content pane work together…. it could have been saved, and my current theme could have been altered somewhat as well. While I prefer my current theme right now, it does bug me that something so tiny, would have fixed what I ended up throwing away.

Using the handy dandy, guide on the clear property from the w3schools the clear property can be summed up thusly:

Image and text elements that appear in another element are called floating elements.

The clear property sets the sides of an element where other floating elements are not allowed.

Or to put it another way, you basically create a page break at the bottom of an element, right, left, or both. This is one of the reasons I want to go into this line of work, it really excites me to have learned this, and everyday I find something like this that I did not know.

09.29.07 read more »

Ok I’ll… with Visual Studio.NET

So here we are a few weeks into the semester when my course (CIS 285A - ASP.net) finally started, it’s fifteen weeks not eighteen. This course requires my Visual Studio 2005 software, which I have and my product license key, which I appear to have lost.

No problem I will simply log in to the student service that got me this expensive software for free and get the key. Ok no I won’t I’m locked out. Ok I will put in a support request with the service, and the school, and in the meantime attempt to do my work while at work since I work in the CIS labs.

Ok no I won’t do my work because I keep on getting error messages that make no sense at all. So now i will attempt to make this software work with Visual Basic Express, Ok no I won’t Vista won’t let me install IIS, something about being elevated, thanks for the great error code Microsoft.

Ok a couple of days later I figure out the elevated problem, I had to run a dos command as administrator in Vista, nothing tough to do but an annoyance all the same. Still though no dice on getting work done at home. So I head back to work to accomplish this task.

Still no dice and still no response from any of my support requests until finally, over the course of two days a support request is answered, and I have access again to my account so I can get my product activation keys. But I am at work and still unable to fix this problem with odd error messages at work. That is until…..

I discover what the error messages actually mean, the teacher told us to put a text field control on the form, but did not tell us to name it anything in particular and the error message did not inform me of an issue, neither did I look for the blue squigglies that indicate a coding error.

Long story short: I hate looking at other peoples code and have a hard time with it, I need to get over it big time.

Now if only I could get work done at home….

EDIT: After much hand wringing, cursing, and emails back and forth I am able to successfully run Visual Studio.NET and ASP.net under Vista. I doubt I will learn anything new, but hey it’s another language I can familiarize and confuse myself with. Special thanks go out to people at my work/school.

09.20.07 read more »
more?