Build HTML Video Player Support SD, HD, FHD, UHD Resolution

HTML5 video player which support multiple video resolution sd (standard deviation), HD (high deviation), FHD (full high deviation), UHD (ultra-high deviation) when we click the button it should change the size according to its resolution you also can change video path by giving a name with extension. Save the code as given the suggested name "htmlplayer.html". remember file name extension should be .html or .htm. 

Tip:- This code is not converting videos, this is just increasing the length and width of the video, so don't be confused.


<!DOCTYPE html>

<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">SD</button>
<button onclick="makeSmall()">HD</button>
<button onclick="makeNormal()">FHD</button>
<button onclick="makeNormal1()">UHD</button>
<video id="video1" width="360">
<source src="aa1.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.

var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)

function makeBig() {
myVideo.width = 480;

function makeSmall() {
myVideo.width = 720;

function makeNormal() {
myVideo.width = 1080;

function makeNormal1() {
myVideo.width = 2160;

<p>HTML5 Video Player By <a href="http://www.programmingwithbasics.com/" target="_blank">Ghanendra Yadav</a>.</p>

                                                 Video Playing In 360 Px

free html5 SD video player

                                                     Video Playing In SD 480 Px

free html5 video player,

                                                       Video Playing In HD 720 Px

html player for website pwb

                                                  Video Playing In FHD 1080 Px

html5 player for website pwb support SD, HD, DVD

                                                        Video Playing In UHD 2160 Px

html media player support upto 4K videos

Previous Post
Next Post

post written by:

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me