How to Add Video to Your HTML5 and CSS3 Based Web Pages

By Andy Harris

The ability to play videos through HTML is a major breakthrough, and it’s not difficult to implement. You can use a tag to add video to your web page, and the video plays directly in the browser without requiring a plugin like Flash.

Of course, it isn’t perfect. There are a number of competing video standards, and the browsers cannot agree on which standard to accept. The most important standards are called H.264 and Ogg.

Some browsers prefer one; some prefer the other. To make things more complicated, the file extension for a video doesn’t always indicate the underlying coding mechanism. This means video encoding requires some experimentation. If your video file is not in the format you want, you may need to convert it. FFmpeg and VLC are outstanding free tools you can use to convert video to whatever format you need.

As with any intellectual property, be sure you have the permission of the file’s original owner. Just because you can embed a video into your web page doesn’t mean you should do so.

image0.jpg

The code for this page shows how much the <video> tag is like <audio>:

<!DOCTYPE html>
<head>
 <title>videoDemo</title>
</head>
<body>
 <h1>Video Demo</h1>
 <video src = "bigBuck.ogv"
   controls = "controls">
 Your browser does not support embedded video
 through HTML 5.
 </video>
 <p>
 This video is a trailer for the incredible short movie
 "Big Buck Bunny." This experiment proves that talented
 volunteers can produce a high-quality professional video
 using only open-source tools.
 Go to <a href = "http://www.bigbuckbunny.org">
 http://www.bigbuckbunny.org</a> to see the entire video.
 </p>
</body>
</html>

Video files are extremely large, and they can make your website seem much slower to users. They also are cumbersome to move to a web server. For this reason, many web developers prefer to upload videos to a service like YouTube and simply link to the video on another server.

If you right-click a YouTube video, you can select Copy Embed Code from the menu that appears. This gives you code you can use on your own site.