Overclock.net › Articles › Removing The Need For Flash When Including Videos In Websites

Removing The Need For Flash When Including Videos In Websites

joshd
By: joshd
Posted 7/1/12 • Last updated 7/1/12 • 399 views • 3 comments
It's well known that Flash is dying. The iSeries of devices do not support it, and many large sites like YouTube have the option to use HTML5. In this tutorial I will teach you how to ditch flash and use HTML5 to embed videos in your web pages.

This guide is for people who already know how to use HTML and CSS.

What will you need


You will need; a web host, a code editor, a video file, and about ten minutes to get things going.

Steps


1. You will open your code editor and make the basic structure of a HTML5 web page. like:
Code:
<!DOCTYPE HTML>
<html>
     <head>
<title>HTML5 Video rocks!</title>
<meta charset="utf-8" lang="en_GB">
</head>

<body>

</body>
</html>

2. Now in the body we will want to place our video. Do this by adding:
Code:
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

What does the code do?


The opening
Code:
<video
starts the video element.

The width and height are obviously the size of the video on screen.
Code:
controls="controls">
tells the browser that you want people to have control over the video. This lets them pause, change the volume, and rewind the video among other things. Leave this out if you do not want this.
Code:
<source src="movie.mp4" type="video/mp4" />
loads the video in a MP4 format from the server.
Code:
<source src="movie.ogg" type="video/ogg" />
loads it in OGG format.

The device will decide which version to play.
Code:
Your browser does not support the video tag.
is for browsers that do not support the element. E.g. Internet Explorer 6, 7 + 8.

This was just a quick introduction to the HTML5 video and I encourage you to read further.

Joshd

smile.gif

Comments (3)

dotancohen 7/10/12 at 12:11am
Thank you, this is very concise and informative. The semicolon after "You will need" should be a colon. Also, you mention that this is a guide for people who know HTML and CSS, but even the CSS requirement is redundant. Thank you for such a wonderful article.
dushan24 7/27/12 at 6:35pm
Nice guide, just remember that HTML5 is not fully supported across all browsers.

In the past I've had the video tag work in Chrome but not Firefox...
joshd 10/11/12 at 1:32pm
It is now fully supported across all major browsers, IE9, Chrome whatever, FF whatever and Opera Whatever
Overclock.net › Articles › Removing The Need For Flash When Including Videos In Websites