Creating a Video Tag's Custom Controls using jQuery Tutorial

Submitted by oretnom23 on Tuesday, December 28, 2021 - 17:16.

In this tutorial, you will learn how to create a Custom Controls for the HTML Video Elements. here, you will know how to create a custom play/pause button, stop button, playback slider, and volume slider. The custom controls functionalities can be achieve using JavaScript and jQuery Library.

Getting Started

Download Bootstrap v5 and jQuery Library. After that compile the libraries in a directory that you will use for storing your source code.

Creating The Custom Style Sheet

Below is the a simple CSS (Cascading Style Sheet) script for the custom design of some part of the application. Save this file as custom.css

  1. :root {
  2.     --bs-success-rgb: 71, 222, 152 !important;
  3. }
  4.  
  5. html,
  6. body {
  7.     height: 100%;
  8.     width: 100%;
  9.     font-family: Apple Chancery, cursive;
  10. }
  11.  
  12. .btn-info.text-light:hover,
  13. .btn-info.text-light:focus {
  14.     background: #000;
  15. }
  16.  
  17. #vid-el {
  18.     height: 60vh;
  19.     background: linear-gradient(0deg, #3c3b3b, #424242, #000000);
  20.     object-fit: unset;
  21.     object-position: center center;
  22. }
  23.  
  24. #range-holder {
  25.     width: 45vw;
  26. }
  27.  
  28. #playBackSlider {
  29.     overflow: hidden;
  30.     height: 5px;
  31.     -webkit-appearance: none !important;
  32.     width: 100%;
  33.     background: #616060;
  34. }
  35.  
  36. #playBackSlider::-webkit-slider-thumb {
  37.     -webkit-appearance: none;
  38.     width: 10px;
  39.     height: 10px;
  40.     cursor: e-resize;
  41.     background: #ff0000;
  42.     box-shadow: -45vw 1px 1px 45vw #ee3d3d;
  43. }

Creating The Interface

In the script below, it contains all the elements code script such as the video, buttons, range/slider, and more. Save this file as index.html.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Video Custom Controls</title>
  9.     <link rel="stylesheet" href="./Font-Awesome-master/css/all.min.css">
  10.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  11.     <link rel="stylesheet" href="./css/custom.css">
  12.     <script src="./js/jquery-3.6.0.min.js"></script>
  13.     <script src="./js/bootstrap.min.js"></script>
  14.     <script src="./js/script.js"></script>
  15. </head>
  16.  
  17. <body class="bg-light">
  18.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar">
  19.         <div class="container">
  20.             <a class="navbar-brand" href="https://sourcecodester.com">
  21.             Sourcecodester
  22.             </a>
  23.  
  24.             <div>
  25.                 <b class="text-light">Video Custom Controls</b>
  26.             </div>
  27.         </div>
  28.     </nav>
  29.     <div class="container py-5" id="page-container">
  30.         <!-- Video Container -->
  31.         <div id="vid-container">
  32.             <video src="sample-mp4-file.mp4" id="vid-el" class="w-100"></video>
  33.             <h4><b>Custom Controls</b></h4>
  34.             <!-- Controls -->
  35.             <div class="d-flex">
  36.                 <div class="mx-1">
  37.                     <button class="btn btn-sm btn-dark text-light" id="play-btn" data-value="play"><i class="fa fa-play"></i></button>
  38.                 </div>
  39.                 <div class="mx-1">
  40.                     <button class="btn btn-sm btn-dark text-light" id="stop-btn"><i class="fa fa-stop"></i></button>
  41.                 </div>
  42.  
  43.                 <div class="mx-1">
  44.                     <span id="currentTime">--:--</span>
  45.                 </div>
  46.                 <div id="range-holder" class="mx-1">
  47.                     <input type="range" id="playBackSlider" value="0">
  48.                 </div>
  49.                 <div class="mx-1">
  50.                     <span id="duration">--:--</span>
  51.                 </div>
  52.                 <div class="mx-1">
  53.                     <span id="vol-icon"><i class="fa fa-volume-up"></i></span> <input type="range" value="100" id="volume">
  54.                 </div>
  55.             </div>
  56.             <!-- End of Controls -->
  57.         </div>
  58.         <!-- End of Video Container -->
  59.     </div>
  60.  
  61.  
  62. </body>
  63.  
  64. </html>

Creating the Main Functions

Below are the codes that makes the video buttons and controls functional. Save this file as script.js.

  1. var _video_el;
  2. var slider;
  3.  
  4. $(function() {
  5.     _video_el = $('#vid-el')[0]
  6.     setTimeout(() => {
  7.             $('#duration').text(String(Math.floor(_video_el.duration / 60)).padStart(2, '0') + ":" + String(Math.floor(60 * Math.abs((_video_el.duration / 60) - Math.floor(_video_el.duration / 60)))).padStart(2, '0'))
  8.         }, 500)
  9.         // Pause/Play Video
  10.     $('#play-btn').click(function() {
  11.             var val = $(this).attr('data-value')
  12.             if (val == 'play') {
  13.                 _video_el.play()
  14.                 slider = setInterval(() => {
  15.                     var current_slide = (_video_el.currentTime / _video_el.duration) * 100;
  16.                     $('#playBackSlider').val(current_slide)
  17.                     $('#currentTime').text(String(Math.floor(_video_el.currentTime / 60)).padStart(2, '0') + ":" + String(Math.floor(60 * Math.abs((_video_el.currentTime / 60) - Math.floor(_video_el.currentTime / 60)))).padStart(2, '0'))
  18.                 }, 500)
  19.                 $(this).html('<i class="fa fa-pause"></i>')
  20.                 $(this).attr('data-value', 'pause');
  21.             } else {
  22.                 _video_el.pause()
  23.                 $(this).html('<i class="fa fa-play"></i>')
  24.                 $(this).attr('data-value', 'play');
  25.                 clearInterval(slider)
  26.             }
  27.         })
  28.         // Stop Video
  29.     $('#stop-btn').click(function() {
  30.         $('#play-btn').html('<i class="fa fa-play"></i>')
  31.         $('#play-btn').attr('data-value', 'play');
  32.         _video_el.pause()
  33.         _video_el.currentTime = 0;
  34.         $('#playBackSlider').val(0)
  35.         clearInterval(slider)
  36.         $('#currentTime').text(String(Math.floor(_video_el.currentTime / 60)).padStart(2, '0') + ":" + String(Math.floor(60 * Math.abs((_video_el.currentTime / 60) - Math.floor(_video_el.currentTime / 60)))).padStart(2, '0'))
  37.     })
  38.  
  39.     // Playback Slider Moved Function 
  40.     $('#playBackSlider').on('mousedown', function() {
  41.         $(this).on('mousemove', function() {
  42.             _video_el.pause()
  43.             _video_el.currentTime = (_video_el.duration * ($(this).val() / 100));
  44.             $('#currentTime').text(String(Math.floor(_video_el.currentTime / 60)).padStart(2, '0') + ":" + String(Math.floor(60 * Math.abs((_video_el.currentTime / 60) - Math.floor(_video_el.currentTime / 60)))).padStart(2, '0'))
  45.             clearInterval(slider)
  46.         })
  47.  
  48.     })
  49.     $('#playBackSlider').on('mouseup', function() {
  50.         $(this).off('mousemove')
  51.         _video_el.currentTime = (_video_el.duration * ($(this).val() / 100));
  52.         $('#currentTime').text(String(Math.floor(_video_el.currentTime / 60)).padStart(2, '0') + ":" + String(Math.floor(60 * Math.abs((_video_el.currentTime / 60) - Math.floor(_video_el.currentTime / 60)))).padStart(2, '0'))
  53.         if ($('#play-btn').attr('data-value') == 'pause') {
  54.             _video_el.play()
  55.             slider = setInterval(() => {
  56.                 var current_slide = (_video_el.currentTime / _video_el.duration) * 100;
  57.                 $('#playBackSlider').val(current_slide)
  58.             }, 500)
  59.         }
  60.     })
  61.  
  62.     // volume slider
  63.     $('#volume').on('mousedown', function(e) {
  64.         $(this).on('mousemove', function() {
  65.             var vol = $(this).val() / 100
  66.             _video_el.volume = vol
  67.             if (vol == 0) {
  68.                 $('#vol-icon').html('<i class="fa fa-volume-off"></i>')
  69.             } else if (vol < .5) {
  70.                 $('#vol-icon').html('<i class="fa fa-volume-down"></i>')
  71.             } else {
  72.                 $('#vol-icon').html('<i class="fa fa-volume-up"></i>')
  73.             }
  74.         })
  75.     })
  76.     $('#volume').on('mouseup', function(e) {
  77.         $(this).off('mousemove')
  78.     })
  79.  
  80. })

That's it! You can now test the application in your browser and see if we have met our goal on this tutorial. If ever you have encountered any errors, please review your source code by differentiating it from the source code I provided above. You can also test the working source code I created for this tutorial. You can download the source code zip file below this article.

DEMO VIDEO

That is the end of this tutorial. I hope you'll find this Video Element's Custom Controls useful for your current and future projects.

Happy Coding :)

Tags

Add new comment

About text formats
  • 474 views