HTML now can natively play videos in browsers without the need for Flash, which is quite amazing. This can be especially useful if your computer doesn’t have a video player or the video player is either messed up or disabled. This article will discuss how to write HTML to allow you to play a video in your browser.
How To Write HTML For Playing a Video In A Browsers
Actually, writing the HTML code is very simple. You just need to use the video tag and some attributes inside the tag. The video tag must have a beginning and closing tag
<video></video>
Attributes You Should Use With The HTML Video Tag
The first attribute you must use is the src attribute. This will tell the browser where your video is located. For example, if your video were called myvideo.mp4, and the file were located in the same folder as your HTML file, you could write
<video src="myvideo.mp4"> </video>
If you are hosting a video on your site, and you are unsure that a specific video format like mp4, ogg, or whatever is unsupported in some browser, you should have fallbacks. That is to say, you should have the same video in different formats. To have fallbacks you just follow the first src you have followed by spaces. For example,
<video src="myvideo.mp4 myvideo.ogg myvideo.avi"> </video>
Next, you should have the controls attribute. The controls attribute gives you the ability to pause, skip to a different part of the video, play etc like any video player. You can also have the video go full screen with the options attribute. It can look like
<video src="myvideo.mp4 myvideo.ogg myvideo.avi" controls> </video>
Other Optional Video Attributes For The HTML5 Video Tag
You might not like the default size of an html video. You can change it with the height and width attributes. If for example, you want the height to be 500 pixels, and the width to be 800 pixels, you can write something like
<video src="myvideo.mp4 myvideo.ogg myvideo.avi" controls width="800" height="500"> </video>
The Autoplay Attribute
The autoplay attribute does as the name suggests, it automatically plays a video when the page is loaded. Use this with caution though. Some users might not want to watch the video and it could be annoying to some to automatically load the video each time.
Below is an embedded video that you can watch, and below that is the code for the video. The video is from this github project.
<video src="/wp-content/uploads/2017/10/big_buck_bunny.mp4" controls="controls"> </video>
What did you think of this article? Have you used the video tag before? Let’s discuss it in the comments below.