Home

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

|
Updated:  
2016-03-26 13:18:09
|
HTML5 and CSS3 All-in-One For Dummies
Explore Book
Buy On Amazon

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 tag is like :

<!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.

About This Article

This article is from the book: 

About the book author:

Andy Harris earned a degree in Special Education from Indiana University/Purdue University–Indianapolis (IUPUI). He taught young adults with severe disabilities for several years. He also taught himself enough computer programming to support his teaching habit with freelance programming.
Those were the exciting days when computers started to have hard drives, and some computers connected to each other with arcane protocols. He taught programming in those days because it was fun.
Eventually, Andy decided to teach computer science full time, and he still teaches at IUPUI. He lectures in the applied computing program and runs the streaming media lab. He also teaches classes in whatever programming language is in demand at the time. He has developed a large number of online video-based courses and international distance education projects.
Andy has written several books on various computing topics and languages including Java, C#, mobile computing, JavaScript, and PHP/MySQL.
Andy welcomes comments and suggestions about his books. He can be reached at [email protected].