HTML5 Video Player Which Support Multiple Video Resolution SD (Standered Deviation), HD (High Deviation), FHD (Full High Deviation), UHD (Ultra High Deviation) When We Click Button It Should Change The Size According To Its Resolution You Also Can Change Video Path By Giving Name With Extesion
Code Copy From Here
HTMLPLAYER.html
<!DOCTYPE html>
<html>
<body>
<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>
<br><br>
<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.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 480;
}
function makeSmall() {
myVideo.width = 720;
}
function makeNormal() {
myVideo.width = 1080;
}
function makeNormal1() {
myVideo.width = 2160;
}
</script>
<p>HTML5 Video Player By <a href="http://www.programmingwithbasics.com/" target="_blank">Ghanendra Yadav</a>.</p>
</body>
</html>
Output:-
Video Playing In 360 Px
Video Playing In SD 480 Px
Video Playing In HD 720 Px
Video Playing In FHD 1080 Px
Video Playing In UHD 2160 Px
Code Copy From Here
HTMLPLAYER.html
<!DOCTYPE html>
<html>
<body>
<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>
<br><br>
<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.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 480;
}
function makeSmall() {
myVideo.width = 720;
}
function makeNormal() {
myVideo.width = 1080;
}
function makeNormal1() {
myVideo.width = 2160;
}
</script>
<p>HTML5 Video Player By <a href="http://www.programmingwithbasics.com/" target="_blank">Ghanendra Yadav</a>.</p>
</body>
</html>
Output:-
Video Playing In 360 Px
ReplyDeletePretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
Webdesining course in chennai