Now you can embed videos in HTML 5 without any javascript or players set up for your site. The tutorial below will explain the basic syntax for adding a video to your website using the HTML 5 video tag.

Adding a video with HTML 5

Below is the HTML 5 syntax to embed a video. You will ned to upload your Ogg, mp4, and WebM videos to a directory in your site. The code sample below shows thee video files in a movies folder.

<video width="320" height="240" controls>
<source src="movies/movie.mp4" type="video/mp4">
<source src="movies/movie.ogv" type="video/ogv">
<source src="movies/movie.webm" type="video/webm">
Your browser does not support the video tag.
</video> 

HTML 5 video snapshotWhen you save the changes and view the page you should see it load like the snapshot to the right.

Browser specific Video formats

Each browser will render a specific file type. Not all browsers will render the same video format. For example IE and Safari can read mp4s and not the other formats. Below is the File types for each browser.

If the video is not loading in your browser, most likely the file type is not the correct one. Make sure you have one of each type uploaded to your server and the file path and file MIME type is correct.

Supported Video File format per browser
FireFox WebM, Ogg
Chrome mp4, WebM, Ogg
Safari mp4
Opera WebM, Ogg
Internet Explorer mp4

Now that you know how to insert the HTML5 videos in your webpage, the next tutorial will explain HTML5 Video Player Elements.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2002
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5275

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!