HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python TL;DR – HTML5 video player lets you include video content to be played straight in the webpage without adding third-party plugins.
Contents
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:
<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
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified 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:
<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:
<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 thetypeattribute 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
posterattribute, 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
Chrome
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera
