Video How-to for Web Designers
When you have to host video yourself! (last updated Septemer 2013)
If you haven't looked into this before, you'll be amazed that it's still so complicated. HTML5 has this great new <video> tag, and it's widely supported. But to really be browser-compatible, you have to serve no less than 3 different file formats AND a Flash fall-back for Internet Explorer!
This "to-do" and resource list assumes a good working knowledge of HTML / CSS & browser compatibility issues. Familiarity with jquery, .htaccess files, and image processing for web wouldn't hurt.
1. Can you just slap it up on YouTube?
Beleive me, that would be so much easier!
Or Vimeo? (free for non-commercial use only)
2. Is your video a reasonable size and format?
Ideal would be MP4 at resolution 640 x 480 (max res for iPhone), less than 10 minutes, less than 25MB.
If not:
- Convert a .mov file with Resize MOV Video tool
from Total Movie Converter. This will also let you re-size screen resolution. But the only useful format I can find is .avi
AND / OR
- Compress file with Handbrake. Use this guide for settings.
3. Convert to correct formats
You'll need .mp4, .webm and .ogv (theora)
Use Miro Video Converter or similar software to make these conversions.
4. Create the poster image
Some browsers and players need an image to show. It's best if it's the first frame. Take a screenshot of the video, and create a .jpg file. It's easiest to name it poster.jpg, and put it in the video folder (assuming you only have one movie).
Note: Poster displays have issues, too. You may choose to ignore the poster if you can get away with it.
5. Set up the Flash Player
Use FlowPlayer. Flowplayer now hosts the javscript & CSS files for you! And it requires jquery. So all you really need to do is copy the header links from here. http://flowplayer.org/docs/ (or from source code of the page you are reading)
Also upload the mp4 file.
6. Test the Flash Player
Create a test page with the following div (see source code).
This should work in most browsers. Don't worry if it doesn't work in Chrome yet. Especially important is IE in compatibility mode. The key points:
- Remember to reference 2 flowplayer files plus jquery in the head.
- Upload the mp4 file to the video folder.
- Paste the code into your test page, then make sure the links are right.
- Be sure to leave class="flowplayer" in the div tag.
7. Upload the remaining video files (ogg, webm)
8. Create the complete video tag
You'll want copy the div below (see source code) to reproduce the tag in its container. Note the comments in the code. Or you may choose to work directly from FlowPlayer documentation.
Reference http://flowplayer.org/docs/. Check Player Size, Video Formats, & Video Attributes.
Also, you can design-your-own here: http://flowplayer.org/designer/ , which helps you see code and video attributes.
9. Modify the .htaccess file
The MIME types need to be set on server, via the .htacess file, as follows (Be sure to leave spaces intact):
- AddType video/ogg .ogv
- AddType video/mp4 .mp4
- AddType video/webm .webm
You don't have to understand MIME types, just remember: When modifying .htaccess files, be careful. Don't do anything you can't un-do, and use an HTML Editor like Dreamweaver to ensure that the read-write permissions remain intact.
10. Create the download links
For those who can't stream (sigh) you may want to create download links. Since most browsers will try to automatically PLAY the video, you must create FORCED DOWNLOAD links. Here is one way to do that, using PHP, from Boutell.com. Basically, you are creating a separate php page with a special header that tells the browser what to do with the video file.
Your download links might look something like this (feel free to copy from the source code):
Having trouble? If the video does not stream correctly, you can download it to your desktop, then open and play it as you would a file on your own computer.
Download video:
MP4 format Open with Quicktime, Google Chrome or Windows Media Player
Ogg format Open with Firefox
An alternative to download links, albeit a bit slack, would be to just instruct the user to right-click on the video and save a copy to their computer. This would work in most browsers.
11. Before you forget, go back and like, thank, or donate to all the open source software and free info that saved you so much time!
BeauCreations Web Design Facebook Page
All done! You deserve a break, a walk, or a beer.
Here's avery nice article that explains why you had to do all that.
Video on the Web from Dive into HTML5