Embedding a Video on a Webpage Using HTML5

Posted on - Last Modified on

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.

Subscribe Now For Weekly Updates

Stay up to date with the best articles on the Freelancer Community. Subscribe now for the best Design, Development, and Freelancing content each week.

Posted 24 November, 2015

Happymarli

PRO. Proofreader, Editor, Writer and App Developer

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 2544+ projects completed on freelancer. 2)...

Next Article

Boosting Mobile App Engagement with Smart Banners