Blogs chevron_right Codding chevron_right How to create an HTML5 video player using JavaScript and CSS?

How to create an HTML5 video player using JavaScript and CSS?

HTML5 video player using simple JavaScript and CSS. We used CSS of mritunjoy.com here, but you can edit with your own. This article is just only to teach you how to code.

22,Dec
2019

0

Comments

Views




This is the complete code.

<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="https://mritunjoy.com/styles/css/common/common.css" media="screen" async /> </head> <body> <!-- ----------------------------------------------- VIDEO START ----------------------------------------------- --> <div id="wholeviddiv" class="pad-5px bo-small-blank width-50f" style="background-color:black;position:relative;"> <div id="topbarvideo" style="position:absolute;top:0;left:0;background-color:black;opacity:0.5;display:none;" class="overflow-auto width-100"> <div class="float-right"> <span class="text-none font-12px" style="vertical-align:7px;"> <span id="curtimetext" class="text-none">00:00</span> / <span id="durtimetext" class="text-none">00:00</span> </span> <img src="styles/icons/24.png" style="height:17px;width:17px;" onclick="changevidquality()" class="mar-5px" /> <img id="fullscreenbtn" src="styles/icons/25.png" style="height:17px;width:17px;" class="mar-5px" /> </div> </div> <img id="videoloadingid" src="styles/icons/17.png" style="position:absolute;left:40%;bottom:40%;width:20%;" onclick="playid(this,'mVideoId')" /> <div onmouseenter="mVideosControlIn()" onmouseleave="mVideosControlOut()" > <video id="mVideoId" class="width-100" > <source src="<?php echo $signedUrlCannedPolicy; ?>" type="video/mp4" /> </video> </div> <div onmouseenter="mVideosControlIn()" id="mVideosConId" class="overflow-auto width-100" style="position:absolute;left:0;bottom:0;display:none;background-color:black;opacity:0.5;"> <div style="padding-top:5px;padding-bottom:5px;padding-left:0px;padding-right:0px;" class="align-center"> <input id="seekslider" style="width:92%;" type="range" min="0" max="100" value="0" step="1" /> </div> <div class="overflow-auto tablets-desktop"> <img src="styles/icons/20.png" style="height:17px;width:17px;" class="mar-5px" /> <img id="playpausebtn" src="styles/icons/18.png" onclick="playPause(this,'mVideoId')" style="height:17px;width:17px;" class="mar-5px" /> <img src="styles/icons/21.png" style="height:17px;width:17px;" class="mar-5px" /> <img id="mutebtn" src="styles/icons/22.png" style="height:17px;width:17px;" class="mar-5px" /> <input id="volumeslider" type="range" min="0" max="100" value="100" step="1" /> </div> </div> </div> <!-- ----------------------------------------------- VIDEO END ----------------------------------------------- --> <!-- ----------------------------------------------- MODAL FOR CHANGING THE VIDEO QUALITY START ----------------------------------------------- --> <div id="videoqualitybox" style="position:absolute;top:0;left:0;background-color:black;border:1px solid gray;width:100%;opacity:0.9;height:100%;display: none;" class="align-center"> <div style="width:50%;background-color:white;opacity:1;" class="mar-0 pad-5px"> <h4>Change Quality</h4> <input type="radio" name="vidq" onclick="changeq('440')" /><label>140p</label> <br/> <input type="radio" name="vidq" onclick="changeq('444')" /><label>240p</label> <br/> <input type="radio" name="vidq" onclick="changeq('443')" /><label>360p</label> <p>Please select the video quality</p> </div> </div> <!-- ----------------------------------------------- MODAL FOR CHANGING THE VIDEO QUALITY END ----------------------------------------------- --> </body> </html> <script type="text/javascript"> function changevidquality(){ document.getElementById("videoqualitybox").style.display='block'; } function changeq(e){ document.getElementById("videoqualitybox").style.display='none'; window.location.href='/test3.php?q='+e; } function mVideosControlIn(){ let mVideosConId = document.getElementById("mVideosConId"); let topbarvideo = document.getElementById("topbarvideo"); mVideosConId.style.display="block"; topbarvideo.style.display="block"; } function mVideosControlOut(){ let mVideosConId = document.getElementById("mVideosConId"); let topbarvideo = document.getElementById("topbarvideo"); mVideosConId.style.display="none"; topbarvideo.style.display="none"; } function playPause(btn,vid){ var vid = document.getElementById(vid); if(vid.paused){ vid.play(); btn.src = "styles/icons/19.png"; document.getElementById("videoloadingid").style.display='none'; } else { vid.pause(); btn.src = "styles/icons/18.png"; document.getElementById("videoloadingid").style.display='block'; } } function playid(btn,vid){ var vid = document.getElementById(vid); vid.play(); btn.style.display = "none"; document.getElementById("playpausebtn").src="styles/icons/19.png"; } document.getElementById('mVideoId').addEventListener('ended',endedvideo,false); function endedvideo(e) { document.getElementById("playpausebtn").src = "styles/icons/17.png"; } var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider,fullscreenbtn; function intializePlayer(){ // Set object references vid = document.getElementById("mVideoId"); playbtn = document.getElementById("playpausebtn"); seekslider = document.getElementById("seekslider"); curtimetext = document.getElementById("curtimetext"); durtimetext = document.getElementById("durtimetext"); mutebtn = document.getElementById("mutebtn"); volumeslider = document.getElementById("volumeslider"); fullscreenbtn = document.getElementById("fullscreenbtn"); // Add event listeners playbtn.addEventListener("click",playPause,false); seekslider.addEventListener("change",vidSeek,false); vid.addEventListener("timeupdate",seektimeupdate,false); mutebtn.addEventListener("click",vidmute,false); volumeslider.addEventListener("change",setvolume,false); fullscreenbtn.addEventListener("click",toggleFullScreen,false); } window.onload = intializePlayer; function vidSeek(){ var seekto = vid.duration * (seekslider.value / 100); vid.currentTime = seekto; } function seektimeupdate(){ var nt = vid.currentTime * (100 / vid.duration); seekslider.value = nt; var curmins = Math.floor(vid.currentTime / 60); var cursecs = Math.floor(vid.currentTime - curmins * 60); var durmins = Math.floor(vid.duration / 60); var dursecs = Math.floor(vid.duration - durmins * 60); if(cursecs < 10){ cursecs = "0"+cursecs; } if(dursecs < 10){ dursecs = "0"+dursecs; } if(curmins < 10){ curmins = "0"+curmins; } if(durmins < 10){ durmins = "0"+durmins; } curtimetext.innerHTML = curmins+":"+cursecs; durtimetext.innerHTML = durmins+":"+dursecs; } function vidmute(){ if(vid.muted){ vid.muted = false; mutebtn.src = "styles/icons/23.png"; } else { vid.muted = true; mutebtn.src = "styles/icons/22.png"; } } function setvolume(){ vid.volume = volumeslider.value / 100; } function toggleFullScreen(){ if(vid.requestFullScreen){ vid.requestFullScreen(); } else if(vid.webkitRequestFullScreen){ vid.webkitRequestFullScreen(); } else if(vid.mozRequestFullScreen){ vid.mozRequestFullScreen(); } } </script>

We hop you did understand with this codes.

Just change the image URLs with your existing images on your website.

And remove the Mritunjoy CSS and use your own CSS.


Mritunjoy Mushahary

Author of the Content

Founder, Creator and CEO of mritunjoy.com. Working



Please Login to leave a Comments

Feedback Help Contact Terms&Condition Privacy Policy About us

134

Total users

110

Active users

536

Active Earners

Location

India, Assam, Bodoland, Gossaigaon, 783360
[email protected]
8486866741


Find Us on

84+ Downloads

Download our Android Apps and Get Everything on your Mobile.

Copyright ©2019-20 mritunjoy.com,All Rights Reserved