Adding Video to Web Pages with HTML5

Beyond Simply Youtube and Vimeo Embeds: Adding Video using HTML5

With HTML5 can the ability to add video to web pages without having to use some type of player or Flash. HTML5 includes a variety of control options, but to get started, let’s go with a video set to display an image until the video is ready, autoplay once loaded, and also show its controls so the viewer can restart or replay if desired.

For more information about the possible controls, please visit www.w3schools.com .

Wondering how to get your video into those formats?

There are multiple programs online and for download that will encode video in multiple formats. They support all the output formats included in the code, as well as a variety of others. Each offers varying options beyond choosing a video file and choosing an output format, so you can select the one with the exact features you need. Most programs can take virtually any video file as input, including DV video produced by consumer-level camcorders. They produce reasonable quality output from most videos. If you are not happy with the output, you may want to look into a commercial program. Some options include converterpoint.com, Online-Convert.com, Handbrake, Freemake Video Converter, EasyHTML5Video, Any Video Converter Free, Free HTML5 Video Player And Converter, and Apowersoft Video Converter.

1.  For our purposes, we are only interested in converting our video to three formats.
   • WebM
   • Theora
   • MP4
2. Save your output files in the same directory as the source video.
3. Repeat until you have the desired three video files alongside your original source video.

Video not working right?

While adding video to web pages this way is much easier than the old way, you do need to make sure your Apache server supports the new formats. If your video didn’t play correctly in Firefox but does play in Internet Explorer and you’re sure the links to the video files are correct, try adding the following lines to your .htaccess file:

AddType audio/ogg .oga
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webm