Call Me Kung
we're friends, after all

2 Feb 2010

by kung

View Comments

HTML5

You probably won’t be able to see this if you’re using Firefox. In fact, I can guarantee it. Try Google Chrome.

This is just a test to see if I can get HTML5 videos working, and wouldn’t you know it…it works!




<video width="480" controls>
<source src="Insert Source Video (MP4) Here" type='video/mp4"'>
</video>

<audio width="480" src="your mp3/ogg here" controls>
Your browser does not support the audio element. Download (<a href="your mp3/ogg here">MP3</a>)
</audio>

Edit!
Forgot to mention the mp3 code. Note that there’s a download link in case the browser does not support html5. Unfortunately, this does not show up if the browser does support html5, but does not support the AV container.

Code stolen from Dive Into HTML 5, but it’s quite simple, really. I didn’t include autobuffer in the <video> attributes, because there are two videos and I didn’t want to use up your precious bandwidth.

Also, a really fascinating thing about the video tag is that you can roll your own play/pause/etc buttons if you like. I haven’t figured that out yet. However, an annoying aspect of the <video> tag is that you have to specify multiple sources (see where the video tag ends and the source begins?) to maintain compatibility with most browsers. There is a web video standards war going on. Grr.

MAY OGG VIDEO CRUSH ITS OPPONENTS!

*ahem* Anyway, after all is said and done, don’t forget to add the mime-types to your .htaccess file. Otherwise browsers won’t recognize the files or some silliness. I don’t know how it works, really. If you can explain, please do!

Mime-types:

AddType video/ogg .ogv
AddType video/mp4 .mp4

  • yeah ogg!
  • ryokubaka
    Dude, the move where he flips and gets pushed over in mid air is not only amazing, but genius.
  • Me and a few friends do that when we're bored ^_~
  • Nathan
    Oh yeah and HTML5 is pretty sweet.
  • Nathan
    Have you seen the new ABDC? They put in Omarion as a judge since Shane Sparks (allegedly) molested a child. Lets just say...when Lil' Mama has to explain what you're trying to say, you've got a speaking problem. That and so far the crews don't look all that impressive -_-
  • Wow. Lil' Mama explaining someone else's English? Did she go to college or something while I was away? And no, I haven't been watching.
  • George
    Oh, I thought Firefox supported HTML5. Guess not. Anyways, it's seriously great to see an open-source alternative to Flash. Apparently much less taxing on the CPU/GPU as well.
  • Yep, FF does support HTML5 out of the box, but it only supports ogv. The videos I'm using here are .mp4, which have licensing issues. Ogg video is the free (as in Free) alternative.
blog comments powered by Disqus