Embedding a Video on a Webpage Using HTML5

Embedding a video on a webpage using HTML5 is a relatively straightforward process. The code is simple, and you don't have to worry about video players or third party software. There are a few steps that you have to go through, however, and some things to consider regarding browser support as well as the different types of video that work in each browser.

Upload the Video

The first step in the process is to upload the video to your Web server or get the URL of the hosted video. For this example, we will use a video called YourVideo which has been uploaded to the video folder on the server, i.e. video/YourVideo.mp4.

Add the Code

Once you have the video URL or location on your server, you can add your code. This is what it should look like:

<video width="320" height="240" controls>

  <source src="video/YourVideo.mp4" type="video/mp4">

  <source src="video/YourVideo.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

The code is enclosed in the <video> element. The first part sets the width and the height of the video. It's recommended that you set the size. Otherwise the screen could flicker or glitch as the browser tries to apply a size if you leave it out. In this example we used a video size of 320 x 240.

The "controls" parameter overlays video controls -- play, pause, a timeline, volume etc. This is the only parameter used in this example, but there are others available such as:

·         preload – Tells the user's browser to start downloading the video as soon as the page loads

·         autoplay – Tells the user's browser to play the video automatically

·         currentTime – Sets when the video starts (for example, you could start the video one minute in)

·         volume – Sets the default volume level of the video, although the user can adjust this if you have "controls" included

The next part of the code is the source element. This tells the browser where the video is located, as already mentioned. You will see, however, that there are two video sources listed—YourVideo.mp4, and YourVideo.ogg. When a browser sees this, it will start at the top of the list and work down until it finds a compatible format.

Image source: http://www.w3schools.com/html/html5_video.asp

From this screenshot, you can see that MP4 is the most widely accepted video type. The Ogg video file will catch browsers that can't play MP4, like Opera versions older than Opera 25.

The final part of the source element sets the type parameter. These should be allocated as follows:

·         MP4 - video/mp4

·         WebM - video/webm

·         Ogg - video/ogg

Browser Support

The final thing to remember is browser support—some older browsers do not recognise the <video> element, so the above code will not work. This applies to Web browsers that are older than the list below:

·         Chrome 4.0

·         Internet Explorer 9.0

·         Firefox 3.5

·         Safari 4.0

·         Opera 10.5

So long as the user has a more recent browser than these, the video will play.

Happymarli
Happymarli Hire Me

Professional Proofreader, Editor and Writer

Do you need a professional editor and writer to proofread your technical document, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, article, and marketing material ensuring their content is flawless and appealing to readers? Why Hire Me? 1) I have a 5 star average rating for 2397+ projects completed on freelancer. 2)...

Hire Me

Next Article

Boosting Mobile App Engagement with Smart Banners