Video Player Custom Controls
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 - 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"; }
}
Developer | Eleftheria Batsou |
Username | EleftheriaBatsou |
Uploaded | September 07, 2022 |
Rating | 3 |
Size | 3,665 Kb |
Views | 18,216 |
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!
Name | Size |
Music App Template - FlexBox | 3,132 Kb |
Code Player | 3,290 Kb |
Personal Portfolio Webpage | 8,863 Kb |
Draw Like Never Before | 2,372 Kb |
Landing Page for an App | 3,320 Kb |
Vertical Timeline - My life | 4,888 Kb |
Animate Your Name | 2,722 Kb |
Postcode Finder and Map | 3,904 Kb |
Clock with JS | 2,350 Kb |
Etch-A-Sketch | 2,665 Kb |
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!
Name | Username | Size |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Transition | Shayhowe | 1,632 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Tail rose iris lined | Kbrtrm | 1,846 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Simple Weather App | Cmwebby | 0 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!