Custom <video> controls

Developer

Size

30,956 Kb

Views

22,264

Custom <video> controls Previews
Custom <video> controls HTML Codes
Custom <video> controls CSS Codes
Custom <video> controls JS Codes

How do I make an custom <video> controls?

This is an ongoing experiment where I toy around with the video element and its associated methods in javascript. . What is a custom <video> controls? How do you make a custom <video> controls? This script and codes were developed by Blake Tarter on 26 September 2022, Monday.

Custom <video> controls Previews

Custom <video> controls - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom <video> controls</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
body { background-color: #ecf0f1; font-family: 'Helvetica', 'Arial', 'sans serif'; position: relative;
}
.video-container { position: relative; width: 50%; margin: 50px auto; box-shadow: 0 1px 1px 0 rgba(100, 100, 100, 0.5); overflow: hidden; -webkit-transform: scale(1, 1); -webkit-transition: 0.3s ease; transform: scale(1, 1); transition: 0.3s ease;
}
.video-container:-webkit-full-screen { width: 100%; /*height: 100%;*/ margin: 0;
}
.video-container:-ms-full-screen { width: 100%; /*height: 100%;*/ margin: 0;
}
.video-container:-moz-full-screen { width: 100%; /*height: 100%;*/ margin: 0;
}
.video-container:fullscreen { width: 100%; /*height: 100%;*/ margin: 0;
}
.video-container.loading { -webkit-transform: scale(0.9, 0.9); -webkit-transition: 0.3s ease; transform: scale(0.9, 0.9); transition: 0.3s ease;
}
.flat-video { width: 100%; display: block; background-color: #bdc3c7;
}
.controls-bar { position: absolute; bottom: 0; left: -1px; right: -1px; height: 50px;
}
.playPause { position: absolute; top: 20px; left: 5px; /*height: 50px; width: 50px;*/ color: rgba(255, 255, 255, 0.9); cursor: pointer; /*-webkit-transform: translateX(-50px);*/ -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.playPause:hover, .sound:hover { color: #3498db;
}
.sound { position: absolute; top: 20px; right: 5px; /*height: 50px; width: 50px;*/ color: rgba(255, 255, 255, 0.9); cursor: pointer; /*-webkit-transform: translateX(-50px);*/ -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.duration { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: translateY(40px); -webkit-transition: 0.3s ease; transform: translateY(40px); transition: 0.3s ease;
}
.duration-amount { float: left; width: 0%; height: 50px; background-color: #3498db; opacity: 0.5; -webkit-transition: 0.1s; transition: 0.1s;
}
.controls-bar.off .duration { -webkit-transform: translateY(40px); -webkit-transition: 0.3s ease; transform: translateY(40px); transition: 0.3s ease;
}
.controls-bar.off .playPause { /*-webkit-transform: translateX(-50px);*/ color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.controls-bar.off .sound { /*-webkit-transform: translateX(-50px);*/ color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.top-controls-bar { position: absolute; top: 0; left: -1px; right: -1px; height: 50px;
}
.info { position: absolute; top: 5px; left: 5px;
}
.title { color: rgba(255, 255, 255, 0.9); margin: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.author { color: rgba(255, 255, 255, 0.9); margin: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.fullscreen { position: absolute; top: 5px; right: 5px; color: rgba(255, 255, 255, 0.9); cursor: pointer; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.fullscreen:hover { color: #3498db;
}
.top-controls-bar.off .title { color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.top-controls-bar.off .author { color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.top-controls-bar.off .fullscreen { color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
@font-face { font-family: 'video_payer'; src: url("data:application/octet-stream;base64,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") format("woff"), url("data:application/octet-stream;base64,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sAQlYGQjsAMlYGRQWCEbIyFZIyAgsAQmI0ZhOFktsDcssAAWICAgsAUmIC5HI0cjYSM8OC2wOCywABYgsAgjQiAgIEYjR7ABKyNhOC2wOSywABawAyWwAiVHI0cjYbAAVFguIDwjIRuwAiWwAiVHI0cjYSCwBSWwBCVHI0cjYbAGJbAFJUmwAiVhuQgACABjYyMgWGIbIVljuAQAYiCwAFBYsEBgWWawAWNgIy4jICA8ijgjIVktsDossAAWILAIQyAuRyNHI2EgYLAgYGawAmIgsABQWLBAYFlmsAFjIyAgPIo4LbA7LCMgLkawAiVGUlggPFkusSsBFCstsDwsIyAuRrACJUZQWCA8WS6xKwEUKy2wPSwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xKwEUKy2wPiywNSsjIC5GsAIlRlJYIDxZLrErARQrLbA/LLA2K4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrErARQrsARDLrArKy2wQCywABawBCWwBCYgLkcjRyNhsAlDKyMgPCAuIzixKwEUKy2wQSyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAJQysgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2GwAiVGYTgjIDwjOBshICBGI0ewASsjYTghWbErARQrLbBCLLA1Ky6xKwEUKy2wQyywNishIyAgPLAEI0IjOLErARQrsARDLrArKy2wRCywABUgR7AAI0KyAAEBFRQTLrAxKi2wRSywABUgR7AAI0KyAAEBFRQTLrAxKi2wRiyxAAEUE7AyKi2wRyywNCotsEgssAAWRSMgLiBGiiNhOLErARQrLbBJLLAII0KwSCstsEossgAAQSstsEsssgABQSstsEwssgEAQSstsE0ssgEBQSstsE4ssgAAQistsE8ssgABQistsFAssgEAQistsFEssgEBQistsFIssgAAPistsFMssgABPistsFQssgEAPistsFUssgEBPistsFYssgAAQCstsFcssgABQCstsFgssgEAQCstsFkssgEBQCstsFossgAAQystsFsssgABQystsFwssgEAQystsF0ssgEBQystsF4ssgAAPystsF8ssgABPystsGAssgEAPystsGEssgEBPystsGIssDcrLrErARQrLbBjLLA3K7A7Ky2wZCywNyuwPCstsGUssAAWsDcrsD0rLbBmLLA4Ky6xKwEUKy2wZyywOCuwOystsGgssDgrsDwrLbBpLLA4K7A9Ky2waiywOSsusSsBFCstsGsssDkrsDsrLbBsLLA5K7A8Ky2wbSywOSuwPSstsG4ssDorLrErARQrLbBvLLA6K7A7Ky2wcCywOiuwPCstsHEssDorsD0rLbByLLMJBAIDRVghGyMhWUIrsAhlsAMkUHiwARUwLQBLuADIUlixAQGOWbABuQgACABjcLEABUKxAAAqsQAFQrEACCqxAAVCsQAIKrEABUK5AAAACSqxAAVCuQAAAAkqsQMARLEkAYhRWLBAiFixA2REsSYBiFFYugiAAAEEQIhjVFixAwBEWVlZWbEADCq4Af+FsASNsQIARAA=") format("truetype");
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'video_payer'; src: url('../font/video_payer.svg?16555943#video_payer') format('svg'); }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before { font-family: "video_payer"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-play:before { content: '\e800';
}
/* '' */
.icon-resize-full:before { content: '\e801';
}
/* '' */
.icon-pause:before { content: '\e802';
}
/* '' */
.icon-resize-small:before { content: '\e803';
}
/* '' */
.icon-share:before { content: '\e807';
}
/* '' */
.icon-sound:before { content: '\e808';
}
/* '' */
.icon-mute:before { content: '\e809';
}
/* '' */
.icon-ccw:before { content: '\e80a';
}
/* '' */
.icon-volume:before { content: '\e80c';
}
/* '' */ </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="video-container loading"> <video class="flat-video" autobuffer></video> <div class="controls-bar off"> <span class="playPause icon-play"></span> <div class="duration"> <div class="duration-amount"></div> </div> <span class="sound icon-sound"></span> </div> <div class="top-controls-bar off"> <div class="info"> <h2 class="title">Calm The Storm</h4> <p class="author">Jonathan Wright</p> </div> <span class="fullscreen icon-resize-full"></span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom <video> controls - Script Codes CSS Codes

@charset "UTF-8";
body { background-color: #ecf0f1; font-family: 'Helvetica', 'Arial', 'sans serif'; position: relative;
}
.video-container { position: relative; width: 50%; margin: 50px auto; box-shadow: 0 1px 1px 0 rgba(100, 100, 100, 0.5); overflow: hidden; -webkit-transform: scale(1, 1); -webkit-transition: 0.3s ease; transform: scale(1, 1); transition: 0.3s ease;
}
.video-container:-webkit-full-screen { width: 100%; /*height: 100%;*/ margin: 0;
}
.video-container:-ms-full-screen { width: 100%; /*height: 100%;*/ margin: 0;
}
.video-container:-moz-full-screen { width: 100%; /*height: 100%;*/ margin: 0;
}
.video-container:fullscreen { width: 100%; /*height: 100%;*/ margin: 0;
}
.video-container.loading { -webkit-transform: scale(0.9, 0.9); -webkit-transition: 0.3s ease; transform: scale(0.9, 0.9); transition: 0.3s ease;
}
.flat-video { width: 100%; display: block; background-color: #bdc3c7;
}
.controls-bar { position: absolute; bottom: 0; left: -1px; right: -1px; height: 50px;
}
.playPause { position: absolute; top: 20px; left: 5px; /*height: 50px; width: 50px;*/ color: rgba(255, 255, 255, 0.9); cursor: pointer; /*-webkit-transform: translateX(-50px);*/ -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.playPause:hover, .sound:hover { color: #3498db;
}
.sound { position: absolute; top: 20px; right: 5px; /*height: 50px; width: 50px;*/ color: rgba(255, 255, 255, 0.9); cursor: pointer; /*-webkit-transform: translateX(-50px);*/ -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.duration { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.5); -webkit-transform: translateY(40px); -webkit-transition: 0.3s ease; transform: translateY(40px); transition: 0.3s ease;
}
.duration-amount { float: left; width: 0%; height: 50px; background-color: #3498db; opacity: 0.5; -webkit-transition: 0.1s; transition: 0.1s;
}
.controls-bar.off .duration { -webkit-transform: translateY(40px); -webkit-transition: 0.3s ease; transform: translateY(40px); transition: 0.3s ease;
}
.controls-bar.off .playPause { /*-webkit-transform: translateX(-50px);*/ color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.controls-bar.off .sound { /*-webkit-transform: translateX(-50px);*/ color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.top-controls-bar { position: absolute; top: 0; left: -1px; right: -1px; height: 50px;
}
.info { position: absolute; top: 5px; left: 5px;
}
.title { color: rgba(255, 255, 255, 0.9); margin: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.author { color: rgba(255, 255, 255, 0.9); margin: 0; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.fullscreen { position: absolute; top: 5px; right: 5px; color: rgba(255, 255, 255, 0.9); cursor: pointer; -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.fullscreen:hover { color: #3498db;
}
.top-controls-bar.off .title { color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.top-controls-bar.off .author { color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
.top-controls-bar.off .fullscreen { color: rgba(255, 255, 255, 0); -webkit-transition: 0.3s ease; transition: 0.3s ease;
}
@font-face { font-family: 'video_payer'; src: url("data:application/octet-stream;base64,d09GRgABAAAAAA2oAA4AAAAAFogAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEQAAABWPg5IumNtYXAAAAGIAAAARQAAAVq4MAHqY3Z0IAAAAdAAAAAKAAAACgAAAABmcGdtAAAB3AAABZQAAAtwiJCQWWdhc3AAAAdwAAAACAAAAAgAAAAQZ2x5ZgAAB3gAAAMrAAADvkHly8FoZWFkAAAKpAAAADUAAAA2A3KKI2hoZWEAAArcAAAAIAAAACQHWwNRaG10eAAACvwAAAAnAAAAKB/YAABsb2NhAAALJAAAABYAAAAWBL0Dym1heHAAAAs8AAAAIAAAACAAowvJbmFtZQAAC1wAAAGFAAAC8VHzwXJwb3N0AAAM5AAAAFkAAAB4T2iSPXByZXAAAA1AAAAAZQAAAHvdawOFeJxjYGTWZ5zAwMrAwVTFtIeBgaEHQjM+YDBkZGJgYGJgZWbACgLSXFMYHF4wvOBhDvqfxRDF7MRQAxRmBMkBANAVC0Z4nGNgYGBmgGAZBkYGEAgB8hjBfBYGCyDNxcDBwASEDC+YX3C94Pn/H6ToBcMLdghbglH8n/hfqF4oYGRjGPEAAJIgDMwAAAAAAAAAAAAAAAAAAAB4nK1WaXMTRxCd1WHLNj6CDxI2gVnGcox2VpjLCBDG7EoW4BzylexCjl1Ldu6LT/wG/ZpekVSRb/y0vB4d2GAnVVQoSv2m9+1M9+ueXpPQksReWI+k3HwpprY2aWTnSUg3bFqO4kPZ2QspU0z+LoiCaLXUvu04JCISgap1hSWC2PfI0iTjQ48yWrYlvWpSbulJd9kaD+qt+vbT0FGO3QklNZuhQ+uRLanCqBJFMu2RkjYtw9VfSVrh5yvMfNUMJYLoJJLGm2EMj+Rn44xWGa3GdhxFkU2WG0WKRDM8iCKPslpin1wxQUD5oBlSXvk0onyEH5EVe5TTCnHJdprf9yU/6R3OvyTieouyJQf+QHZkB3unK/ki0toK46adbEehivB0fSfEI5uT6p/sUV7TaOB2RaYnzQiWyleQWPkJZfYPyWrhfMqXPBrVkoOcCFovc2Jf8g60HkdMiWsmyILujk6IoO6XnKHYY/q4+OO9XSwXIQTIOJb1jkq4EEYpYbOaJG0EOYiSskWV1HpHTJzyOi3iLWG/Tu3oS2e0Sag7MZ6th46tnKjkeDSp00ymTu2k5tGUBlFKOhM85tcBlB/RJK+2sZrEyqNpbDNjJJFQoIVzaSqIZSeWNAXRPJrRm7thmmvXokWaPFDPPXpPb26Fmzs9p+3AP2v8Z3UqpoO9MJ2eDshKfJp2uUnRun56hn8m8UPWAiqRLTbDlMVDtn4H5eVjS47CawNs957zK+h99kTIpIH4G/AeL9UpBUyFmFVQC9201rUsy9RqVotUZOq7IU0rX9ZpAk05Dn1jX8Y4/q+ZGUtMCd/vxOnZEZeeufYlyDSH3GZdj+Z1arFdgM5sz+k0y/Z9nebYfqDTPNvzOh1ha+t0lO2HOi2w/UinY2wvaEGT7jsEchGBXMAGEoGwdRAI20sIhK1CIGwXEQjbIgJhu4RA2H6MQNguIxC2l7Wsmn4qaRw7E8sARYgDoznuyGVuKldTyaUSrotGpzbkKXKrpKJ4Vv0rA/3ikTesgbVAukTW/IpJrnxUleOPrmh508S5Ao5Vf3tzXJ8TD2W/WPhT8L/amqqkV6x5ZHIVeSPQk+NE1yYVj67p8rmqR9f/i4oOa4F+A6UQC0VZlg2+mZDwUafTUA1c5RAzGzMP1/W6Zc3P4fybGCEL6H78NxQaC9yDTllJWe1gr9XXj2W5twflsCdYkmK+zOtb4YuMzEr7RWYpez7yecAVMCqVYasNXK3gzXsS85DpTfJMELcVZYOkjceZILGBYx4wb76TICRMXbWB2imcsIG8YMwp2O+EQ1RvlOVwe6F9Ho2Uf2tX7MgZFU0Q+G32Rtjrs1DyW6yBhCe/1NdAVSFNxbipgEsj5YZq8GFcrdtGMk6gr6jYDcuyig8fR9x3So5lIPlIEatHRz+tvUKd1Ln9yihu3zv9CIJBaWL+9r6Z4qCUd7WSZVZtA1O3GpVT15rDxasO3c2j7nvH2Sdy1jTddE/c9L6mVbeDg7lZEO3bHJSlTC6o68MOG6jLzaXQ6mVckt52DzAsMKDfoRUb/1f3cfg8V6oKo+NIvZ2oH6PPYgzyDzh/R/UF6OcxTLmGlOd7lxOfbtzD2TJdxV2sn+LfwKy15mbpGnBD0w2Yh6xaHbrKDXynBjo90tyO9BDwse4K8QBgE8Bi8InuWsbzKYDxfMYcH+Bz5jBoMofBFnMYbDNnDWCHOQx2mcNgjzkMvmDOOsCXzGEQModBxBwGT5gTADxlDoOvmMPga+Yw+IY59wG+ZQ6DmDkMEuYw2Nd0ayhzixd0F6htUBXowPQTFvewONRUGbK/44Vhf28Qs38wiKk/aro9pP7EC0P92SCm/mIQU3/VdGdI/Y0Xhvq7QUz9wyCmPtMvxnKZwV9GvkuFA8ouNp/z98T7B8IaQLYAAQAB//8AD3icNVNBaNtIFJ0/I0vqNFFlVZFMcFRl4khe1XWL4kjBZF0TaA/F+BQWUYoJRZSSQ089lGJKDjksPYRgegjFh9BDDiGUhdWyPuQYlh58XMqy5NDTHkIpIZRlKa6yI7eZw/9//vDfvP/4HwHiBz7jHrqMxF9pDm5cB0OXQHQW87XAhH8UJV0tMFaAZ9Si6b+qbmFs6WpWhhE6/5MU8AkS0SSSf6OSgDCvn827khuCKZmzeROOYTnuxTvpbrzzPD2K8Ul61N2Je+kez8Ly82843Gj4EMkoz3EmL33D8afyOuM0Zi8CGNxP0tH9BB82v/6xsoLrzQs/5tInm8T+zmXyUg44RuiOycCYSthfhzL/lWy+fpz+HW/34vSv9X6MD7djcB6/RjDGsDmGy7WYFrgW876hi8xZrAWL8+Icc2rBgm/O17JE9jLH3BxXKxfgl40o6kY4HXk+jxqBAwLmiahRc9IvGINYevfTC34VVaFv8werL6hCI+I5uy8zuW9xCXLn/51vkh5Z4R3MoB9QiO6iK82JOz8u3ixZM1My5G5cvxpYWFJwFTcAgiq4VSyJFpgWvsrJ3YbANK6A6FYhCy3g8RzLGeLYu07As8Yv3vvjjlfcGAxf6e02fJSNVn2p26bcL9W7bVWz1U6pZNtr6juN0mDay6xSVGCfTmhrqlxUM6+VccvrHL/3iu22/mo42EiXabu7VG8ZMvf1pZYBPctT1my7VOqoXVrW1iqFzE5va2UayNOZpRQRrvkeeUo8Pn8zqILo73PX9MnLOXIxh7ytEAISWiApxAULh7zteXC0MDBMqQpZ+yRW1dGZxphKFJb49wJWeLT7ZhWMSlSlolxJh+lZ+ecm24pq9Q4VBEaoWuYVSrGiEMVOO/6D3VJhpaVYoNsVUaC3ovX0bBOqTdtr+o5F5XIrWxPO9YAc4A/I5PMhoGxXfEPNpA2NBT9QHSZKC5K70ACs73/6tL/15O7qwxdJ8iXBW4NBF5/iD6fpwWl0bzkBlLztDod7Jxnu+QghsoEfoolsB3E2d3y2ZpkT8NaNKbJxyx59NrQJjbBiOWFVqlM40gz2P8mW2g8AeJxjYGRgYABilavv98Tz23xl4GZ+ARRhuBC+PwZCt8v8//G/hXkNsxOQy8HABBIFAIRRDcAAAAB4nGNgZGBgDvqfxRDF/IKB4f8X5jUMQBEUwAUAi/YFsnicY37BwMD4hYGBWYKBgUkISLcAsQIQ9wFxCRCvAeIGBgYAbZgE9AAAAAAAAB4AQgBkAIYAxgFAAZYBwgHfAAAAAQAAAAoARwAFAAAAAAACAAAAEABzAAAAIAtwAAAAAHicdZDLagIxGIXPeCtV6KKFbrrJqiiF8YLduKkg6F6ouyJRMxc7ToZMFFz2KbrrO/SF+gZ9hx7HUKTYCfnny8l/DYBrfMHD8XvkPrKHBk9HLuECQ8dl6hPHFfLUcZX84rhGjhzX8YDccQM3+GAGr3LJ0xqfjj3ceneOS7jyuo7L1J8cV8jPjqvkV8c18pvjOmbeu+MG7r3vkc72Jg4jK5qjluh1un2x2AtNKU5lIuTWRtrkYigCnVqVJNpf6s0uXik9z+RemakKt4k0J8oJzpTJY52Krt85UScqVUZatTpUyndhz9pABEZvxNjVEJnRa7W0fmRtNmi3T2tjBI0MexjECPmIFgJNqi3+e+igiz5pQQ9Bz6NXjBQSCRWJLSOi4ibnecgd8JRSVfRIyD6WtBvsGLeiqjFnRcmMilFT2pBZEirmH5/z6qywOe8O9QQ79dnved8JbVqQLDpb/c6UMyLkpJYrKLo3RbcC4z9zCOY73K2pLKn7xWtZqgO0uf6Z+wemho8dAAAAeJxtyFsOQDAQBdC5tN5bsaimRkhaxBjC6kn4dD4PJfSq6N/zSJDCwCJDjgIlKrMEd9Yry3hx22sIdnEq3Hwj0T0lg1vZyqxTZ6JunHp/ZPscNDLRDTQJF3cAAAB4nGPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGVidNjIwaEFoDhR6JwMDAycyi5nBZaMKY0dgxAaHjoiNzCkuG9VAvF0cDQyMLA4dySERICWRQLCRgUdrB+P/1g0svRuZGFwAB9MiuAAAAA==") format("woff"), url("data:application/octet-stream;base64,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sAQlYGQjsAMlYGRQWCEbIyFZIyAgsAQmI0ZhOFktsDcssAAWICAgsAUmIC5HI0cjYSM8OC2wOCywABYgsAgjQiAgIEYjR7ABKyNhOC2wOSywABawAyWwAiVHI0cjYbAAVFguIDwjIRuwAiWwAiVHI0cjYSCwBSWwBCVHI0cjYbAGJbAFJUmwAiVhuQgACABjYyMgWGIbIVljuAQAYiCwAFBYsEBgWWawAWNgIy4jICA8ijgjIVktsDossAAWILAIQyAuRyNHI2EgYLAgYGawAmIgsABQWLBAYFlmsAFjIyAgPIo4LbA7LCMgLkawAiVGUlggPFkusSsBFCstsDwsIyAuRrACJUZQWCA8WS6xKwEUKy2wPSwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xKwEUKy2wPiywNSsjIC5GsAIlRlJYIDxZLrErARQrLbA/LLA2K4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrErARQrsARDLrArKy2wQCywABawBCWwBCYgLkcjRyNhsAlDKyMgPCAuIzixKwEUKy2wQSyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAJQysgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2GwAiVGYTgjIDwjOBshICBGI0ewASsjYTghWbErARQrLbBCLLA1Ky6xKwEUKy2wQyywNishIyAgPLAEI0IjOLErARQrsARDLrArKy2wRCywABUgR7AAI0KyAAEBFRQTLrAxKi2wRSywABUgR7AAI0KyAAEBFRQTLrAxKi2wRiyxAAEUE7AyKi2wRyywNCotsEgssAAWRSMgLiBGiiNhOLErARQrLbBJLLAII0KwSCstsEossgAAQSstsEsssgABQSstsEwssgEAQSstsE0ssgEBQSstsE4ssgAAQistsE8ssgABQistsFAssgEAQistsFEssgEBQistsFIssgAAPistsFMssgABPistsFQssgEAPistsFUssgEBPistsFYssgAAQCstsFcssgABQCstsFgssgEAQCstsFkssgEBQCstsFossgAAQystsFsssgABQystsFwssgEAQystsF0ssgEBQystsF4ssgAAPystsF8ssgABPystsGAssgEAPystsGEssgEBPystsGIssDcrLrErARQrLbBjLLA3K7A7Ky2wZCywNyuwPCstsGUssAAWsDcrsD0rLbBmLLA4Ky6xKwEUKy2wZyywOCuwOystsGgssDgrsDwrLbBpLLA4K7A9Ky2waiywOSsusSsBFCstsGsssDkrsDsrLbBsLLA5K7A8Ky2wbSywOSuwPSstsG4ssDorLrErARQrLbBvLLA6K7A7Ky2wcCywOiuwPCstsHEssDorsD0rLbByLLMJBAIDRVghGyMhWUIrsAhlsAMkUHiwARUwLQBLuADIUlixAQGOWbABuQgACABjcLEABUKxAAAqsQAFQrEACCqxAAVCsQAIKrEABUK5AAAACSqxAAVCuQAAAAkqsQMARLEkAYhRWLBAiFixA2REsSYBiFFYugiAAAEEQIhjVFixAwBEWVlZWbEADCq4Af+FsASNsQIARAA=") format("truetype");
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'video_payer'; src: url('../font/video_payer.svg?16555943#video_payer') format('svg'); }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before { font-family: "video_payer"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-play:before { content: '\e800';
}
/* '' */
.icon-resize-full:before { content: '\e801';
}
/* '' */
.icon-pause:before { content: '\e802';
}
/* '' */
.icon-resize-small:before { content: '\e803';
}
/* '' */
.icon-share:before { content: '\e807';
}
/* '' */
.icon-sound:before { content: '\e808';
}
/* '' */
.icon-mute:before { content: '\e809';
}
/* '' */
.icon-ccw:before { content: '\e80a';
}
/* '' */
.icon-volume:before { content: '\e80c';
}
/* '' */

Custom <video> controls - Script Codes JS Codes

$(document).ready(function() { document.getElementsByClassName('flat-video')[0].src ='http://mazwai.com/system/posts/videos/000/000/112/original/teck_vlog--c100_in_c-log_on_calm_the_storm.mp4?' + Math.floor(Math.random() * 10000); (function buildVideo() { var video = document.getElementsByClassName('flat-video')[0], videoParent = document.getElementsByClassName('video-container')[0], playPauseButton = document.getElementsByClassName('playPause')[0], soundButton = document.getElementsByClassName('sound')[0], fullScreenButton = document.getElementsByClassName('fullscreen')[0], controlsBar = document.getElementsByClassName('controls-bar')[0], topControlsBar = document.getElementsByClassName('top-controls-bar')[0], readyState = video.readyState, duration = video.duration, durationBar = document.getElementsByClassName('duration')[0], durationAmount = document.getElementsByClassName('duration-amount')[0], timer, played, seekPosition, hideControls; if (readyState) { $(video).parent('.video-container').removeClass('loading'); function playPause() { if (video.paused == false) { video.pause(); pauseCount(); } else { video.play(); startCount(); } } video.addEventListener('click', playPause); document.addEventListener('keydown', function(e) { var key = e.which || e.keycode; if (32 === key) { if (video.paused == false) { video.pause(); pauseCount(); } else { video.play(); startCount(); } } e.preventDefault(); }); playPauseButton.addEventListener('click', playPause); soundButton.addEventListener('click', soundToggle); fullScreenButton.addEventListener('click', function() { if (fullScreenButton.className.indexOf('icon-resize-full') > -1) { fullScreen(videoParent); } else { exitFullScreen(); } }); document.addEventListener("fullscreenchange", function (e) { if (fullScreenButton.className.indexOf('icon-resize-full') > -1) { fullScreenButton.className = 'fullscreen icon-resize-small'; } else { fullScreenButton.className = 'fullscreen icon-resize-full'; } }, false); document.addEventListener("mozfullscreenchange", function (e) { if (fullScreenButton.className.indexOf('icon-resize-full') > -1) { fullScreenButton.className = 'fullscreen icon-resize-small'; } else { fullScreenButton.className = 'fullscreen icon-resize-full'; } }, false); document.addEventListener("webkitfullscreenchange", function (e) { if (fullScreenButton.className.indexOf('icon-resize-full') > -1) { fullScreenButton.className = 'fullscreen icon-resize-small'; } else { fullScreenButton.className = 'fullscreen icon-resize-full'; } }, false); document.addEventListener("msfullscreenchange", function (e) { if (fullScreenButton.className.indexOf('icon-resize-full') > -1) { fullScreenButton.className = 'fullscreen icon-resize-small'; } else { fullScreenButton.className = 'fullscreen icon-resize-full'; } }, false); $(video).parent('.video-container').hover(function(e) { $(controlsBar).removeClass('off'); $(topControlsBar).removeClass('off'); clearTimeout(hideControls); }, function() { hideControls = setTimeout(function(e) { $(controlsBar).addClass('off'); $(topControlsBar).addClass('off'); }, 1000); }); durationBar.addEventListener('click', function(e) { seekPosition = e.offsetX / $(durationBar).width() * 100; video.currentTime = (duration * seekPosition) / 100; $(durationAmount).css('width', seekPosition + '%'); }); function startCount() { playPauseButton.className = 'playPause icon-pause'; timer = setInterval(function() { played = video.currentTime; amount = (played/duration) * 100; $(durationAmount).css('width', amount + '%'); }, 100) } function pauseCount() { playPauseButton.className = 'playPause icon-play'; clearInterval(timer); } function soundToggle() { if (soundButton.className.indexOf('icon-mute') > -1) { video.muted = false; soundButton.className = 'sound icon-sound'; } else { video.muted = true; soundButton.className = 'sound icon-mute'; } } function fullScreen(elem) { if(elem.requestFullscreen) { elem.requestFullscreen(); } else if(elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if(elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if(elem.msRequestFullscreen) { elem.msRequestFullscreen(); } } function exitFullScreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } } else { $(video).parent('.video-container').addClass('loading'); setTimeout(buildVideo, 250); } }());
});

Home Page	Home
Developer	Blake Tarter
Username	blaketarter
Uploaded	September 26, 2022
Rating	3
Size	30,956 Kb
Views	22,264

Do you need developer help for Custom <video> 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!

Blake Tarter (blaketarter) Script Codes

Name	Size
Giphy API Search	5,946 Kb
Animated Input Labels	3,265 Kb
Material Buttons	5,794 Kb
Material Design Hiding Navbar	5,268 Kb
Screen Size Searching Tool	7,213 Kb
Chmod numeric calculator	3,704 Kb
Web Audio Synth	7,687 Kb
Mobile Navigation Concept	2,892 Kb
Natural Language Sign Up Form	3,449 Kb
Ubuntu Login Screen	5,028 Kb

Create amazing love letters 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!

Similar Scripts & Codes

Name	Username	Size
RollOver Effect 2	Lmack90	2,162 Kb
CSS Flip Animation	Bbodine1	2,525 Kb
A Pen by Bryan Rojas	Bryanrojas	1,873 Kb
Mobile first social buttons with no iframe	Alistairtweedie	3,158 Kb
Wavy Road with Dashes	Jonobr1	2,679 Kb
Nav Test -- cats 1	Payls	4,735 Kb
NgEasyModal	Lorenzodianni	4,159 Kb
Drag and Drop Quiz	Cgspicer	3,837 Kb
A Pen by Matt Popovich	Mpopv	3,349 Kb
CSS Hover Effects	Alen	3,613 Kb

Do you want hide your ip address?

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!