Adding Video to Web Pages with 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.

The basic code you will need to add to the page is:

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.comOnline-Convert.com, Handbrake, Freemake Video Converter, EasyHTML5VideoSothink Video ConverterAny Video Converter FreeFree 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
The following two tabs change content below.

Karie Barrett

Creative Development Director at QAT Global
is the Creative Development Director at QAT Global. She has over 20 years diverse marketing, design, and business experience. Karie is responsible for driving creative strategy and execution to develop and produce quality creative web and marketing solutions that meet internal and external client's business objectives and goals. @KarieBarrett

Latest posts by Karie Barrett (see all)