Monday, 25 April 2016

HTML5 Video Player Which Support Multiple Video Resolution SD, HD , FHD , UHD

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

www.programmingwithbasics.com

                                                     Video Playing In SD 480 Px


www.programmingwithbasics.com

                                                       Video Playing In HD 720 Px


www.programmingwithbasics.com

                                                  Video Playing In FHD 1080 Px


www.programmingwithbasics.com

                                                        Video Playing In UHD 2160 Px


www.programmingwithbasics.com

Extreme Recommended:- Like our Facebook Page or Join our Facebook Group and Google plus Community for up-to-date. If you have any Query or Question you can ask in the group, I will Try To Solve your Query and try to answers of your Questions withing 24 Hours, You can also Email me or comment below Please suggest to your Friends to join and like our page and don't forget to Subscribe. Enter your Email and click to subscribe.

Ghanendra Yadav

Ghanendra Yadav

Hello, I Am Ghanendra Yadav Owner of This Blog, I am professional Blogger and Programmer. I Love Programming, Logo Making, And Banner Designing. My Highest Qualification is MCA From NIT Warangal. You Can Find Me On Social Media Through Below Link And If You Have Any Query Related To Programming And Other Subject Comment Below or You Can Mail Me I Will Try To Answer Within 24 Hours Email:- yghanendra@student.nitw.ac.in

Find me on Social Media

Facebook | Twitter | Google+ | RSS Feed

No comments:

Post a Comment