🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML5 Video Player: How to Embed a Video in HTML

Reading time 3 min
Published Mar 13, 2019
Updated Jan 21, 2020

TL;DR – HTML5 video player lets you include video content to be played straight in the webpage without adding third-party plugins.

HTML5 Video Element Explained

In HTML4 and earlier versions, video files could only be added to websites using various multimedia plugins (e.g., Adobe Flash).

HTML5 has a native video element that supports three video formats (MP4, WebM and Ogg), making it much easier to embed videos in a webpage. You can define the external source for the video using a file or a URL.

Using the HTML5 video Tag

In HTML5, you can embed a video in your webpage using a pair of <video> tags. It is also mandatory to define the source for the video. You can do it by using a simple src attribute, but it is recommended to choose the <source> tags for that:

Example
<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  <source src="video-tag-sample.webm" type="video/webm">
  <source src="video-tag-demo.ogg" type="video/ogg">
  Video tag is not supported in this browser.
</video>

The reason this is considered a better practice is because using the <source> tags allows you to define multiple sources. The HTML5 video player supports three formats, but not all of them have the same level of browser support. This means you can add sources in different formats to ensure the user can see the video.

If the video cannot be played in any format provided, the user will see the text known as the fallback content. It is the only content within the <video> tags. Use it to provide information to the user or a direct link to the video file.

Customizing Your HTML5 Video

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Video Controls

It is always recommended to add HTML5 video controls to your player. Using special buttons in the player window, the user can manually start and stop the video, skip to specific place using the slider, or toggle between window and full screen video display. To add video controls, include the controls attribute:

Example
<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

If the video has sound, HTML5 video controls also allow modifying the volume or muting it completely. Not only it improves the user experience, but it's also crucial for accessibility. The ability to control the playback is very important for people with disabilities (e.g., photo-sensitive epilepsy).

Player Dimensions

To define the size of your player, you can use the height and width attributes. The video will keep the same aspect ratio.

In the HTML5 video example below, the values are set to 300 for the height and 400 for the width:

Example
<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4" width="400" height="300">
  Video tag is not supported in this browser.
</video>

Note: specifying an exact size also helps avoid flickering during loading.

HTML5 Video Player: Useful Tips

  • If you're using the <source> element, we recommend you to add the type attribute to it. This way, the browser can immediately skip a format it doesn't support without trying to play it and wasting resources.
  • By including a poster attribute, you can add an image to be displayed before the video starts.
  • You can style your HTML5 video player using CSS – e.g., you may modify the opacity or set borders.

Browser support

Browser image
Chrome
3+
Browser image
Edge
All
Browser image
Firefox
3.5+
Browser image
IE
9+
Browser image
Opera
10.5+
Browser image
Safari
3.1+

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All