Jump to content

How to put HTML5 video on your website

+ 3
  macslocum's Photo
Posted Mar 04 2010 12:00 PM

(Updated 3/22/10 with instructions for getting native HTML5 video to play in Firefox.)

Ever since I ran across this example of HTML5 video, I've wanted to tinker with my own variation. This recently released project and tutorial made that possible.

Here are the steps I took to get an HTML5-based video on my own website:

1. I saved a sample video as an MP4 file. I also found that M4V files will work for this as well.

2. I uploaded the video file to my personal web server. For testing purposes, I suggest you use a small video clip; no need to sit around while a massive file slowly uploads.

3. I copied this bit of code to my clipboard:

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js">

4. I logged in to my content management system (Movable Type) and pasted the code before the closing "/head" tag in a template file. You could do the same thing with a static HTML file. Just make sure the "script" element is contained within the "head" area.

5. Finally, I created a post in Movable Type and inserted the following tag and attributes:

<video src="/video/running-emus.mp4" width="480" height="360" controls autobuffer></video>

This is basically an image tag that inserts a video instead of a JPG, GIF or PNG file.

All told, the process took about 15 minutes to fully implement. Here's my test video in action.

The many caveats

HTML5 video has limitations. It doesn't work on all browsers (see the table below). It also lacks the built-in sharing mechanisms we've come to expect from Flash-based videos. You'd have to use an absolute SRC call to post videos on external sites, and that raises all sorts of bandwidth issues.

That said, HTML5 has one big thing going for it: it's not a plugin. Despite being around for years, plugins are at best a stop-gap measure. I shouldn't have to install an external product -- even one as ubiquitous as Flash -- to see basic web content.

HTML5 video browser testing

I tested my HTML5 video in a variety of OS/browser configurations. Here's what worked and what didn't.

OS Browser Works Doesn't work
Mac 10.6.2 Firefox 3.6 *  
Mac 10.6.2 Safari 4.0.4 X  
Mac 10.6.2 Chrome 5.0.307.11 beta X  
Mac 10.6.2 Opera 10.10 *  
Mac 10.5.8 Firefox 3.6 *  
Mac 10.5.8 Safari 4.0.4 X  
Mac 10.5.8 Chrome 5.0.307.11 beta X  
Mac 10.5.8 Opera 10.10 *  
Windows 7 Internet Explorer 8   X
Windows 7 Firefox 3.6 *  
Windows 7 Safari 4.0.4 X  
Windows 7 Chrome 4.0.249.89 X  
Windows 7 Opera 10.5 *  
Win XP with SP3 Internet Explorer 7   X
Win XP with SP3 Firefox 3.6 *  
Win XP with SP3 Safari 4.0.4 X  
Win XP with SP3 Chrome 4.0.249.89 X  
Win XP with SP3 Opera 10.5 *  

* Defaults to the open source Flowplayer. If you don't want Firefox to default to FlowPlayer, you can convert your video to the natively supported Ogg Theora format with the free Micro Video Converter application. You'll then need to insert an extended video tag into your HTML document. Depending on your server configuration, you might also need to edit your .htaccess file. (Not really elegant, I know.) More information on the Theora process is available here under the "What about Theora?" section.

Note: The Chrome Frame can make HTML5 videos run in Internet Explorer, but that's the same type of plugin solution I want to avoid.

I tested the same video on three mobile browsers:

Mobile OS Browser Works Doesn't work
iPod Touch 3.1.3 Safari** X  
iPad Safari*** X
Android 2.0.1 (Droid) Default browser   X
Android 2.0.1 (Droid) Dolphin Browser   X
Android 2.0.1 (Droid) Opera Mini 5 beta X

** The video plays in the iPod Touch's separate video application. It doesn't play within the web page.

*** The iPad plays the video within the web page.



Tags:
0 Subscribe


11 Replies

 : Mar 07 2010 10:37 AM
Real nice of you to publish your test results, thanks for that.

Quick question: did I misunderstand that this was your test page http://www.macslocum...tml5-video.html and the video on it employs the html5 video tag or is something wrong (I turned my plugins off and got a promt "Flash version 9,0 or greater is required You have no flash plugin installed" error...)?

I'm using Opera 10.10 btw (noticed you didn't test with any Opera version).
 : Mar 07 2010 11:08 AM
@JR-Fire: Your comment prompted me to test the video in Opera (v. 10.10 on Mac, v. 10.5 on Windows). Here's what I found

Mac 10.6.2 - Works, but defaults to Flowplayer. This is how Firefox handles the video as well.
Mac 10.5.8 - Works, but defaults to Flowplayer.
Windows 7 - Works, but defaults to Flowplayer.
Win XP w/ SP3 - Works, but defaults to Flowplayer.

Couple questions for you (if you don't mind a little field testing ...):

* Are you on Mac or Win?
* What happens on your end if you turn plugins on? Do you get the Flowplayer version?
------------------
Mac Slocum
Online Managing Editor
 : Mar 08 2010 11:51 AM
@macslocum I'm on Windows. Yes, plugins on, it uses Flowplayer, I just didn't realize Flowplayer was a Flash based video player :)
Thanks,
JR
 : Mar 10 2010 09:40 AM
I feel like Flowplayer is a bit of a dodge. I get why it's there, but I almost wish that wasn't an option. The whole point of this exercise is to incorporate pure HTML5-based video into a web page, not a workaround.
------------------
Mac Slocum
Online Managing Editor
 : Mar 12 2010 11:14 AM
I am on a Mac (Snow Leopard). On Firefox 3.6 it brings up the Flowplayer Flash based video player. However on Safari it runs as HTML5. Nice job!
 : Mar 22 2010 05:56 AM
Update: I added a section to this tutorial that explains how you can get native HTML5 video to play in Firefox.
------------------
Mac Slocum
Online Managing Editor
0
  johnprashath's Photo
Posted Apr 26 2012 08:32 PM

An informative post. Thank you for sharing this information. Mobile devices doesn't have support for Adobe flv player. So, we are in hurry to look for the alternative to deliver the video over it. While HTML5 video is still very early in its development, It is a Good News that most of the Mobile Devices support HTML5 <video> tag. All we need to make our videos to be compatible with IDevices is just encoding it with right codec.
0
  victoryox's Photo
Posted Jun 13 2012 05:44 PM

You can also grab an html5 video player program to help you easily create HTML5 video and embed it into your own website.
0
  brooke007's Photo
Posted Nov 19 2013 03:50 AM

It is a simple process,,,,,below is given steps to put HTML 5 video on web page

If there is only one HTML5 video file to drive into web pages, one can just link to it in a src attribute.

For single source

“<video src="samplevideo.webm" width="640" height="480" auto play></video>”

For multiple sources

For multiple video clips there is a need to make three different versions of video such as Webm, OGG and MP4. Given below are the examples of source codes for multiple videos.

“<video width="640" height="360" controls>”
“<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />”
“<source src="http://www.html5videoplayer.net/videos/toystory.webm" type="video/webm" />”
“<source src="http://www.html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />”
“</video>”

For poster image

“<video poster="http://www.html5videoplayer.net/poster/toystory.jpg" width="640" height="360" controls>”
“<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />”
“<source src="http://www.html5videoplayer.net/videos/toystory.webm" type="video/webm" />”
“<source src="http://www.html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />”
“</video>”

For auto play

Simply auto play to video tag or add auto pla=”autoplay”. For example as given below:
“<video poster="http://www.html5videoplayer.net/poster/toystory.jpg" width="640" height="360" autoplay controls>”
Or
“<video autoplay="autoplay" poster="http://www.html5videoplayer.net/poster/toystory.jpg" width="640" height="360" controls>”

more about HTML 5
0
  justinkennity's Photo
Posted Dec 16 2013 05:31 PM

So how can I upload swf file on my HTML 5 based website? Should I need to convert swf file to HTML 5 supported MP4 file?
 : Mar 05 2014 04:36 AM
Some people are aggressively spamming here and thus spoiling useful topics like this one :x