HTML5 video tag formats

14 Feb
2012

If you’ve played with the new video element in HTML5, you’re probably noticing the power it has to release you of the flash-based bonds you’ve been held captive by. But if you’re running an older browser (anything prior to IE 9 according to this site), you’ll see a supreme lack of video playing in your browser. You’ll need to provide a flash fallback using something like MediaElement.js or Video for Everybody.

Assuming you have fixed your video tag for older browsers, here’s a breakdown of the 3 different video formats you can use with the HTML5 video element.

WebM/VP8

Quoting the WebM Project site, “The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone.” Nothing more really needs to be said about which direction we should heading for video on the web. And again from their site, “WebM is supported by Mozilla, Opera, Adobe, Google and more than seventy other publishers and software and hardware vendors.” I wonder which video format will rise to the top?!

Ogg/Theora

This format is also an open source codec designed to compete with MPEG-4 and other proprietary codecs (Windows Media, Realmedia, etc.). I don’t have tons of experience with it, but it only seems to have a couple of percentage points up on the WebM format in terms of current usage support. Right now it supports all the same browsers. So I put it in just for the heck of it, but you might be able to get by without it.

MPEG-4/H.264

The licensing on MPEG-4 is not royalty-free, so many browsers won’t support this format. Keep in mind that if you’re using all 3 formats (suggested), you need to list this one first because of a bug with the iPad. Also, Firefox and Opera have both stated they won’t support this format. Chrome currently does, but it seems it won’t in upcoming versions. This format is a ticking clock because of its closed door policy. Yes, it’s nice. But its days are numbered.

If you need software to be able to convert quickly and easily to all of these formats, check out Miro Video Converter. It’s an awesome (lightweight) tool.

ps. Have you tried the YouTube HTML5 version? They’ll let you sign up for a trial to see how it’s working for you.

4 Comments

Browser Bias

3 Sep
2011

I’m happy to say that Internet Explorer is only #3 on the list of browsers that are accessing my site. Firefox and Chrome top the list and push IE down to only about 20% of my visits! Thankfully safari is only at 6%!

 

How-to Setup WordPress on MAMP (5 Easy Steps)

16 May
2011

1.       Setup a new MySQL Database through MAMP’s phpmyadmin. Name the database something you will remember. Mark down the name of the database, the server it is located on (usually localhost or 127.0.0.1, sometimes with a port number as well…8888 in my case), the username, and the password (usually root and root if you’re on localhost). You will need these 4 things later.

2.       Download and unzip the latest version of wordpress from wordpress.org

3.       Drop this into the htdocs folder inside Applications>MAMP>htdocs, rename the folder to match your site (in my case bentedder)

4.       Open up firefox and navigate to your new URL (assuming apache & mysql are turned on). http://localhost/bentedder

5.       Follow the login prompts, using the 4 items you have from step 1 (db name, server, username & login)

Done, start Blogging!

Web Designer’s Toolbox

11 May
2011

There are a few things that should be in every web designer’s toolbox. Here’s what is in mine:

Firefox
Invaluable as a testing browser. I was in a conference in Las Vegas with Heather Solomon of Sharepoint Bootcamp, and she confirmed everything I knew when she said, “design for firefox, fix for IE.”

Firebug
A plugin for firefox, it’s brilliant. From viewing and editing your CSS to finding errors in the page. It’s awesome.

Web Developer’s Toolbar
This thing is one of my most used tools (next to firebug). Just download and install it for firefox, you’ll see what I mean.

Textwrangler, Notepad++ (for pc)
I’m a Sharepoint designer currently, so I work on a PC. However, I’m a mac on all my personal projects, so at home I need both. These two text editors are brilliant. Each have their own benefits. Notepad++ is great because you can tell it what language your text file is, and it will try to color code tags appropriately.

Photoshop
Don’t even think of anything else. Although, for a quick screenshot, crop, save, you can’t beat Preview on a mac.

MAMP
MySQL PHP, Apache, for mac. All in one server installation tool. Incredibly easy to use, turn on and off, and is so much faster testing sites locally than on your website, especially since I’m in China and half the internet is blocked over half the time.

Cyberduck and Filezilla
Cyberduck works for editing CSS files live on a server, because the open > edit > save > re-upload feature is seamless. But for large file uploads, Filezilla is much more stable, throws errors into a pile for dealing with later. All around great. But sucks at file editing transfer.

timeEdition
The single best time-tracking application I’ve ever used. Super lightweight, uploads to Google Calendars, exports to iCal, manages clients, projects, and tasks. Brilliant.

What do you use? Leave a comment!

1 Comment

Search and Login above the Ribbon

10 May
2011

I struggled for days with this. Compatibility issues, positioning, ugh. Anyway, here is the solution to putting your search bar and your login menu up above the ribbon in sharepoint 2010.

Step 1: Master Page
The setup of your master page should be something like this:

Right after the opening

tag insert a div. I have given mine a class of “return” because it also holds the return link to my main site from the blog offshoots. Also, insert a line break that has a style of clear:both. This is important later. Will save you a lot of time :).

Step 2: Move Login Controls
Find the login control. It should have the class s4-trc-container-menu. Move into the new div you just created. [cid:image002.jpg@01CC0F2E.E6BCB1E0]

Step 3: Move Search Controls
Find the search control. It should have the id of PlaceHolderSearchArea. Move it beneath the login control.


Step 4: CSS Time
Here’s my CSS for the “return” div:
.return {
width: 100%;
display: block;
font-weight: bold;
border-bottom: 1px solid black;
background:#fff;
float:left;
clear:both;
}

Here’s the CSS for the search control (make sure you add a div around it called “searchbox”:
.s4-search input.ms-sbplain,
.s4-search .srch-gosearchimg,
.s4-search select.ms-sbscopes {
border: 1px solid #333 !important;
}
.s4-search select.ms-sbscopes {
padding:0px;
}
.s4-search input.ms-sbplain,
.s4-search select {
width:140px !important;
}
.searchbox,
.searchbox table {
width:auto;
float:right;
padding:3px;
}
Here’s the CSS for the login control:
.loginbox {
width:auto;
float:right;

}
.s4-trc-container-menu {
margin:0px;
float:right;
padding:10px;
}
.ms-welcomeMenu {
background: none;
padding:0px;
border:none;
font-size:inherit;
margin:0px;
}
.ms-welcomeMenu a:link,
.ms-welcomeMenu.ms-SpLinkButtonActive a:link {
text-decoration:underline;
color:#005baa;
}
.ms-welcomeMenu.ms-SpLinkButtonActive {
background:none;
}
.s4-trc-container .ms-SPLink {
vertical-align:inherit;
}

Try it out. I can send you source files if you need.