Video Player Custom Controls

Developer
Eleftheria Batsou
Size
3,665 Kb
Views
18,216
  1. Video Player Custom Controls Previews
  2. Video Player Custom Controls HTML Codes
  3. Video Player Custom Controls CSS Codes
  4. Video Player Custom Controls JS Codes

How do I make an video player custom controls?

Day: 89 of 100"How to set up a custom controls interface starting with the play/pause button." Customizing the HTML5 video controls interface will allow you to achieve a unique and constant look for your video player in all browser software. Different browser software display different looking default controls for the video element. You can also offer your custom programmed video players to others to use on their websites if they also do not want to use the stock controls that are native to browser software for the video element. We use JavaScript to control the video after we remove the default controls. . What is a video player custom controls? How do you make a video player custom controls? This script and codes were developed by Eleftheria Batsou on 07 September 2022, Wednesday.

Video Player Custom Controls Previews
IQ Test

Video Player Custom Controls - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Video Player Custom Controls</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>
<script type="text/javascript" src="script.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body> <h2 style="text-align: center"> Custom Video Player</h2> <h4 style="text-align: center">You can press: play/pause </h4>
<div id="video_player_box"> <video id="my_video" width="550" height="300" autoplay> <source src="https://r3---sn-q4fl6nlz.googlevideo.com/videoplayback?key=yt6&upn=USylwRzOMdY&ipbits=0&ratebypass=yes&itag=18&clen=11361863&ip=50.97.170.34&mime=video/mp4&requiressl=yes&source=youtube&mm=31&mn=sn-q4fl6nlz&pl=18&mt=1490777786&mv=m&id=o-AFtayyoqPqaEFbUFQ79w1r8OyesnYzrmf4FTHoI9er5k&ms=au&expire=1490799514&gir=yes&sparams=clen,dur,ei,gir,id,initcwndbps,ip,ipbits,itag,lmt,mime,mm,mn,ms,mv,pcm2,pl,ratebypass,requiressl,source,upn,expire&lmt=1490665494077628&pcm2=yes&ei=OXfbWMfyOYnDuQXIt4TwDw&initcwndbps=7188750&signature=E3AAC5E892B9EAA65C801E6F81CCEEC87CE82946.4AB82FC3EFD8C001764EAEAE97DEE0B23D8DCFA0&dur=159.428&signature=&title=lazybox.me-SPIDER-MAN-HOMECOMING---Official-Trailer-2-HD&fp=7lvM3ZVzhZ_UaZWno26bn61qnJ7Uc5Sgo2mdodZplafVmsfQrXCXotVzxaapm4WZla7Ej61bsNztos_Z1JWSoqFpg5XKotHR4rDWjcGNg56jZ5Ook5CyxKltjI20qdPZ2JDIz76i18mibpakoWyZjZuEq8HAhY-N36LO0pOAyNDeqIyNtqHV3OCev5yob5GdoWucn6dnm6STjMTT1KvMyaJulqShbJmPn1vXj61ql6ajcJqkrGqW6g"> </video> <div id="video_controls_bar"> <button id="playpausebtn" onclick="playPause(this,'my_video')"></button> </div>
</div> <div style="text-align: center" id="footer"> <h5><a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria</a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a></h5> </div> <!-- end footer -->
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Video Player Custom Controls - Script Codes CSS Codes

body{ background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%); background-repeat: no-repeat; background-size: contain; background-attachment: fixed; color: white;
}
button{ border:none; cursor:pointer; outline:none; }
button#playpausebtn{	background:url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat;	width:10%;	height:50px; display: block; margin: auto;
}
/*
button#mutebtn{	background:url(https://image.flaticon.com/icons/svg/204/204287.svg) no-repeat;	width:10%;	height:100px; display: block; margin: auto;
}
*/
#footer {color: #000}
#footer a:link{ color: #000; }
#footer a:hover{ background: #fff; }
#footer a:visited{ color: #000; }
#footer a:active{ background: #EEFFA8; }
/* new code for the video */
div#video_player_box{ width:550px; background:#000; margin:0px auto;}
div#video_controls_bar{ background: #333; padding:10px;}

Video Player Custom Controls - Script Codes JS Codes

function playPause(btn,vid){	var vid = document.getElementById(vid); playbtn = document.getElementById("playpausebtn"); playbtn.addEventListener("click",playPause);	if(vid.paused){	vid.play();	btn.innerHTML = " "; playbtn.style.background = "url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat";	} else {	vid.pause();	btn.innerHTML = " "; playbtn.style.background = "url(https://image.flaticon.com/icons/svg/148/148744.svg) no-repeat";	}
}
Video Player Custom Controls - Script Codes
Video Player Custom Controls - Script Codes
Home Page Home
Developer Eleftheria Batsou
Username EleftheriaBatsou
Uploaded September 07, 2022
Rating 3
Size 3,665 Kb
Views 18,216
Do you need developer help for Video Player Custom Controls?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eleftheria Batsou (EleftheriaBatsou) Script Codes
Name
Animate Your Name
Postcode Finder and Map
Sun, earth and code
Calculate Calories and Macros
Landing Page for an App
Personal Portfolio Webpage
Clock with JS
Etch-A-Sketch
Whack - A - Mole
Vertical Timeline - My life
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!