The Video Embed element - Using The HTML < video > Element To Play Videos
{tocify} $title={Table of Contents}
The HTML <video> element is used to embed a video clip or movie into a web page. It provides a standard way to display video content on the web without needing external plugins or software.
The <video> element is a container element that supports a range of attributes and child elements that can be used to customize the video playback experience.
Here are some of the commonly used attributes:
- src: specifies the URL of the video file
- controls: adds playback controls, such as play, pause, and volume
- Autoplay: automatically starts playing the video when the web page loads
- loop: automatically restarts the video when it reaches the end
- muted: mutes the audio of the video
- width and height: specifies the dimensions of the video player on the web page
In addition to the attributes, the <video> element can also contain other child elements, such as <source> and <track>.
The <source> element is used to specify multiple video files in different formats, allowing the browser to choose the best format based on the user's device and browser capabilities.
The <track> element is used to add subtitles or captions to the video.
The <video> element has dramatically simplified the process of embedding videos in web pages, and it supports a wide range of video formats, including MP4, WebM, and Ogg.
However, it's essential to ensure that the video files are optimized for web playback to ensure fast loading and smooth playback on different devices and networks.
HTML <video> Element
To display a video in HTML, utilize the <video> element:
<!DOCTYPE html><html><body><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"></video></body></html>{codeBox}
Note 1: Change the source link to make the above code work on your browser.{alertSuccess}
Note 2: Chromium browsers Don't allow autoplay in most cases. However, muted autoplay is still allowed.{alertWarning}
Add muted after autoplay to allow your video start playing automatically (but muted):
<!DOCTYPE html><html><body><video width="320" height="240" autoplay muted><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg"></video></body></html>{codeBox}
HTML Video Formats
There are 3 supported video formats: MP4, WebM, and Ogg. The browser support for the various formats is:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Video - Media Types
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video - Methods, Properties, and Events
The HTML DOM represents methods, properties, and events for the <video> element.
This allows you to load, play, and pause videos and set duration and volume.
DOM events can also notify you when a video begins to play, is paused, etc.
Video courtesy of Big Buck Bunny.
Try it Yourself (example) »
<!DOCTYPE html><html><body><div style="text-align:center"><button onclick="playPause()">Play/Pause</button><button onclick="makeBig()">Big</button><button onclick="makeSmall()">Small</button><button onclick="makeNormal()">Normal</button><br><br><video id="video1" width="420"><source src="mov_bbb.mp4" type="video/mp4"><source src="mov_bbb.ogg" type="video/ogg">Your browser does not support HTML video.</video></div><script>var myVideo = document.getElementById("video1");function playPause() {if (myVideo.paused)myVideo.play();elsemyVideo.pause();}function makeBig() {myVideo.width = 560;}function makeSmall() {myVideo.width = 320;}function makeNormal() {myVideo.width = 420;}</script><p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p></body></html>{codeBox}
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML Video.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
