Embedding Internet Archive MP4 Video

OK boys and girls… ever try to get Internet Archive MP4 Video like Fresh Hare to embed on a web page and play in both IE and Mozilla Firefox?

Here is the embed code that comes with Fresh Hare (works in IE but not Firefox):

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”640″ height=”504″ id=”_2512411518807″>
<param name=”movie” value=”http://www.archive.org/flow/flowplayer.commercial-3.0.5.swf?0.24257415602602278″ />
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”w3c” value=”true” />
<param name=”flashvars” value=’config={“key”:”#$b6eb72a0f2f1e29f3d4″,”playlist”:[{"url":"http://www.archive.org/download/merry_melodies_fresh_hare/format=Thumbnail?.jpg","autoPlay":true,"scaling":"fit"},{"url":"http://www.archive.org/download/merry_melodies_fresh_hare/merry_melodies_fresh_hare_512kb.mp4","autoPlay":false,"accelerated":true,"scaling":"fit"}],”clip”:{“autoPlay”:false,”accelerated”:true,”scaling”:”fit”},”canvas”:{“backgroundColor”:”0×000000″,”backgroundGradient”:”none”},”plugins”:{“audio”:{“url”:”http://www.archive.org/flow/flowplayer.audio-3.0.3-dev.swf”},”controls”:{“playlist”:false,”fullscreen”:true,”gloss”:”high”,”backgroundColor”:”0×000000″,”backgroundGradient”:”medium”,”sliderColor”:”0×777777″,”progressColor”:”0×777777″,”timeColor”:”0xeeeeee”,”durationColor”:”0×01DAFF”,”buttonColor”:”0×333333″,”buttonOverColor”:”0×505050″}},”contextMenu”:[{"Item merry_melodies_fresh_hare at archive.org":"function()"},"-","Flowplayer 3.0.5"]}’ />
</object>

Now here is my (amateur) workaround, or hack:

<object id=”csSWF” classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″
width=”640″
height=”504″
id=”_74288105109868″>
<param name=”movie” value=”http://www.archive.org/flow/flowplayer.commercial-3.0.5.swf?0.3390401591905876″ />
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”w3c” value=”true” />
<param name=”flashvars” value=’config={“key”:”#$b6eb72a0f2f1e29f3d4″,”playlist”:[{"url":"http://www.archive.org/download/merry_melodies_fresh_hare/format=Thumbnail?.jpg","autoPlay":true,"scaling":"fit"},{"url":"http://www.archive.org/download/merry_melodies_fresh_hare/merry_melodies_fresh_hare_512kb.mp4","autoPlay":false,"accelerated":true,"scaling":"fit"}],”clip”:{“autoPlay”:false,”accelerated”:true,”scaling”:”fit”},”canvas”:{“backgroundColor”:”0×000000″,”backgroundGradient”:”none”},”plugins”:{“audio”:{“url”:”http://www.archive.org/flow/flowplayer.audio-3.0.3-dev.swf”},”controls”:{“playlist”:false,”fullscreen”:true,”gloss”:”high”,”backgroundColor”:”0×000000″,”backgroundGradient”:”medium”,”sliderColor”:”0×777777″,”progressColor”:”0×777777″,”timeColor”:”0xeeeeee”,”durationColor”:”0×01DAFF”,”buttonColor”:”0×333333″,”buttonOverColor”:”0×505050″}},”contextMenu”:[{"Item merry_melodies_fresh_hare at archive.org":"function()"},"-","Flowplayer 3.0.5"]}’ />
<embed name=”csSWF”
src=”http://www.archive.org/download/merry_melodies_fresh_hare/merry_melodies_fresh_hare_512kb.mp4″
width=”640″
height=”504″
bgcolor=”#161616″
quality=”best”
allowScriptAccess=”always”
allowFullScreen=”true”
scale=”showall”
autostart=”0″
pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash”>
</embed>
</object>

The upside is that (as of the date of this post) it will play in both IE and Mozilla Firefox. The downside is that the Firefox embedding lacks the nice thumbnail that shows up in Internet Explorer, as well as the nice control bar.

But that being said, this is a ready-made solution. Enjoy.

Embed WMV and Display in Firefox

Are you having fun trying to find the correct code to embed WMV correctly embed a wmv file so it plays properly in both IE and Firefox?

My problem was: I was trying to embed a wmv file in Tumblr. I set the “autostart” parameter to “false.” But no matter what code I used, it would autostart in Firefox. Basically, Firefox was ignoring the autostart=false command.

First simple fix: change “false” to “0″ and of course, “true” would equal “1″

But I still had problems. I found, however, sample code here that worked. Here is the way I used it:

<OBJECT id=’mediaPlayer’
width=”400″
height=”300″
classid=’CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95′
codebase=’http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701′
standby=’Loading Microsoft Windows Media Player components…’
type=’application/x-oleobject’>
<param name=’fileName’ value=”http://www.iii.org/static/video/mediaplayer/SaveMoneyOnAutoInsurancePodcast.wmv”>
<param name=’animationatStart’ value=’true’>
<param name=’transparentatStart’ value=’true’>
<param name=’autoStart’ value=”0″>
<param name=’showControls’ value=”true”>
<param name=’loop’ value=”true”>
<EMBED type=’application/x-mplayer2′
pluginspage=’http://microsoft.com/windows/mediaplayer/en/download/’
id=’mediaPlayer’
name=’mediaPlayer’
displaysize=’4′
autosize=’-1′
bgcolor=’darkblue’
showcontrols=”true”
showtracker=’-1′
showdisplay=’0′
showstatusbar=’-1′
videoborder3d=’-1′
width=”400″
height=”300″
src=”http://www.iii.org/static/video/mediaplayer/SaveMoneyOnAutoInsurancePodcast.wmv”
autostart=”0″
loop=”true”>
</EMBED>
</OBJECT>

W3C has a page on this as well. It includes parameters.

Notepad++

Notepad++ is an excellent free text editor. It does not have WYSIWYG editing, but it does have color coded editing that is excellent for any text file. It can be used for HTML, XHTML, PHP and CSS. I prefer to use it only for my stylesheets (CSS). Download the latest version of Notepadd++, then view the simple installation and basic usage video below.

CoffeeCup Software

I love www.coffeecup.com. They provide so many cool tools for the lay person at a very affordable price. I purchased a package of their tools a couple years ago, and have had the opportunity to “play” with many of them.

CoffeeCup gives you the opportunity to try the software for free (usually 14 or 30 days), so go ahead and give it a spin!

I was going to provide a YouTube link on using the CoffeeCup HTML Editor for a client this weekend so she could get started editing a small website she has. The YouTube Channel for CoffeeCup is not what I wanted for my client. So I will be taking a stab at creating a “let’s begin” tutorial of my own.  Stay tuned.

What Business Is All About

“Our business model is one of very high risk: We dig a very big hole in the ground, spend three billion dollars to build a factory in it, which takes three years, to produce technology we haven’t invented yet, to run products we haven’t designed yet, for markets which don’t exist.

“We do that two or three times a year.”  – Intel CEO Paul Otellini

YouTube Player Code not compliant

Found a solution to the non-compliant code , courtesy Bernie Zimmerman.

Use this code below. See Bernie’s entire post on this subject.

<object type=”application/x-shockwave-flash” style=”width:425px; height:350px;”data=”http://www.youtube.com/v/7_6B6vwE83U”><param name=”movie” value=”http://www.youtube.com/v/7_6B6vwE83U” /></object>

http://www.bernzilla.com/item.php?id=681

Fonts and CSS

Font and text styles have been deprecated (phased out) in HTML in favor of CSS, and this is where CSS really shines. CSS supports more options for changing font attributes than the deprecated tags it is replacing. If you are still using these tags instead of CSS you’re making a huge mistake.

You can change the color, face, and size of the fonts on your Web page with CSS. Read more

This article is courtesy Jennifer Kyrnin and About.com. Here’s another helpful link.

You can learn more from Jennifer Kyrnin in her new book, About.com Guide to Web Design

How do I include one HTML file in another? SHTML

The following short excerpt is courtesy www.boutell.com.

The easiest way, by far, is to use “server side includes” in your HTML. Server side includes are a simple way to tell your web server to insert various things at various points in your HTML page. You can use them without major changes to your existing pages. The code looks something like this:

<!–#include virtual=”insertthisfile.html” –>

However, some web servers require that you name your file .shtml rather than .html in order to enable the parsing of your file by the server in order to find server side include directives. Read more

There is also an excellent “primer” about this subject at TheSiteWizard.com

Valid HTML code and W3C

Question: Does “compliant code” and W3C validation matter?

Answer: Yes and No. Yes it matters that there are “standards.” It matters because the World Wide Web is already a “Wild West” kind of place, so having some benchmark of what is the “perfect and proper way” to write code for the Web is a good thing. However, the vast majority of web pages are NOT compliant to W3C standards, including most major corporate websites. Why is that you ask? Because the developers of browser software (the most common are: Internet Explorer, Netscape, and Mozilla Firefox) understand that the World Wide Web is an “every man’s” place and common ordinary folks will be building websites by the millions. So they program their browsers to “forgive” non-compliant code. It’s really that simple.

So if you are a “web designer” and it’s faster and easier to write a part of a web page using non-compliant code rather than “compliant code” you will often take the path of least resistance, since time is money and you are billing your client for time. Your client just wants a website that looks good on everyone’s browser, and however you achieve that, frankly, he really doesn’t care.

I am guilty of taking that approach. But so are many other “professional” web designers. And my hundreds of clients have been happy with the results. But “code-purists” are not, and they often use code-compliance as a way to undermine my finished work with clients. So I am designing new templates in W3C compliant code. However, I am NOT designing them to be XHTML compliant until it can be proved that XHTML is really the “new web.” I don’t think so. Currently, HTML 4.01 is the latest standard for pure HTML coding, and that’s how I will design new templates. HTML 5 is on the way, and I think that may become the new standard, so we’ll see.

Question: How many websites are compliant to W3C standards?

Answer: An article on Wikipedia states that only 1 in 141 websites is compliant. I’d be surprised if it’s that many.

Question: Where can I check to see if a website is compliant?

Answer: The W3C has two easy to use validators. One for HTML or XHTML, and the other for CSS (the code that governs how things look on a website).

HML or XHTML Validator

CSS Validator

HTML WYSIWYG Editors

What WYSIWYG editor should you use to edit your websites?

First, what is WYSIWYG? It means “What You See Is What You Get.” If you were not already aware, the web pages you see are really just hundreds of lines of code. And even for those of us who have a decent grasp of how to write actual code, it’s annoying, and we generally still use WYSIWYG editors to some extent. It’s just quicker.

Microsoft FrontPage 2003 is my “poison of choice” for day to day editing, only because I have grown accustomed to it. However, FrontPage is now officially “discontinued” by Microsoft and I say “good riddance.” For all its simplicity, its WYSIWYG editor mangles code, requiring me to often fix a change I just made. And its “FrontPage Extensions” have violated any notion of standardization on the Web. You can get a legal, fully licensed copy of FrontPage 2003 (make sure it’s version 2003) on eBay for around 120 bucks.

Microsoft Expression as a successor product to FrontPage. It’s priced at $299 (cheaper at Amazon.com) and you can download a trial version. As they say “let me know how that works for you.”

Dreamweaver is considered the best “professional” editor on the market. I have an old copy and I love to use it when editing PHP pages. However, I have always found it to be just too much power for me. I am a business-guy turned web-guy late in life, and Dreamweaver just has too many advanced features for my taste. But if you want to try it, you download a fully functional trial for 30 days. After that, be prepared to shell out 400 bucks for this top of the line editor.

Another alternative to FrontPage is CoffeeCup.com’s famous HTML Editor, which is priced at just $49.00. I use other products from this well-known and trusted company. You can try this free for 30 days. And upgrades are free for life.

Want a free website editor? Well, I’m still searching for “the” free editor I would recommend. I’m leaning toward recommending KompoZer, which is the successor open-source program to Nvu. However, I’m in the process of testing every free editor I can find here.

There is a great Wikipedia list of editors as well as a list on thefreecountry.com.

At the end of the day you need to find something that works well for you, learn its faults, and work around them. There is no perfect answer. You should also read this Wikipedia article about HTML Editors to gain a better understanding of the subject before choosing your editor.