Dear Reader, let us know about “Video Slider with Play Pause in jQuery“. So in this tutorial, we learn Step By Step Video Slider with Play Pause in jQuery.
Our aim is to run video slider with its play and pause functionality. It means on page load, this video slider will automatically run and complete its duration and then next video will play automatically. As soon as user wants to pause any video at any interval of time of the video’s running duration, then he can pause it by clicking on pause button. And when he wants to play by sliding video’s duration or without sliding too, he can play his interested video at any time interval.
Here is a Demo link to check this slider’s proper functionality online.
This is an image of the video slider. It will look like this.
Step 1 :- Html Code for Video Slider
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="container"> <video id="vid" width="600" height="300" controls autoplay> <source src="videos/video1.mp4"> </video> <div id="vid_lefts"> <button id="btnleft" class="vid_left"> <b><</b> </button> </div> <div id="vid_rights"> <button id="btnright" class="vid_right" > <b>></b> </button> </div> </div> |
Step 2 :- Css Code for Video Slider
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<style> #container{ height:500px; width:620px; position:relative; } #vid{ position:relative; left:10px; } #vid_lefts{ width:30px; height:40px; position:relative; top:135px; left:0px; position:absolute; } #vid_rights{ position:absolute; width:30px; height:40px; top:135px; right:0px; } .vid_left{ width:30px; height:30px; background-color:white; position:relative; left:0px; border-radius: 20px; } .vid_right{ width:30px; height:30px; position:relative; border-radius: 15px; right:0px; background-color:white; } </style> |
Step 3 :- Script Code for Video Slider
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<script type="text/javascript"> $( document ).ready(function() { var vidcount = 1; var total = 3; //number of videos slide show var ftime = 0; var ctime = 0; var stime = 0; $('#vid').on("timeupdate",function(event) { ctime = this.currentTime; ftime = this.duration; stime = ftime - ctime; if(stime == 0) { vidcount = vidcount + 1; if(vidcount > total) { vidcount = 1; } else if(vidcount < 1) { vidcount = total; } $("#vid").attr("src","videos/video"+ vidcount + ".mp4"); } }); $("#btnleft").click(function() //left navigation function { vidcount = vidcount - 1; if(vidcount > total) { vidcount = 1; } else if(vidcount < 1) { vidcount = total; } $("#vid").attr("src","videos/video"+ vidcount + ".mp4"); }); $("#btnright").click(function() //right navigation function { vidcount = vidcount + 1; if(vidcount > total) { vidcount = 1; } else if(vidcount < 1) { vidcount = total; } $("#vid").attr("src","videos/video"+ vidcount + ".mp4"); }); }); </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<html> <head> <title>Video Slider with Play Pause in jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> #container{ height:500px; width:620px; position:relative; } #vid{ position:relative; left:10px; } #vid_lefts{ width:30px; height:40px; position:relative; top:135px; left:0px; position:absolute; } #vid_rights{ position:absolute; width:30px; height:40px; top:135px; right:0px; } .vid_left{ width:30px; height:30px; background-color:white; position:relative; left:0px; border-radius: 20px; } .vid_right{ width:30px; height:30px; position:relative; border-radius: 15px; right:0px; background-color:white; } </style> </head> <body> <div id="container"> <video id="vid" width="600" height="300" controls autoplay> <source src="videos/video1.mp4"> </video> <div id="vid_lefts"> <button id="btnleft" class="vid_left"><b><</b></button> </div> <div id="vid_rights"> <button id="btnright" class="vid_right" ><b>></b></button> </div> </div> <script type="text/javascript"> $( document ).ready(function() { var vidcount = 1; var total = 3; //number of videos slide show var ftime = 0; var ctime = 0; var stime = 0; $('#vid').on("timeupdate",function(event) { ctime = this.currentTime; ftime = this.duration; stime = ftime - ctime; if(stime == 0) { vidcount = vidcount + 1; if(vidcount > total) { vidcount = 1; } else if(vidcount < 1) { vidcount = total; } $("#vid").attr("src","videos/video"+ vidcount + ".mp4"); } }); $("#btnleft").click(function() //left navigation function { vidcount = vidcount - 1; if(vidcount > total) { vidcount = 1; } else if(vidcount < 1) { vidcount = total; } $("#vid").attr("src","videos/video"+ vidcount + ".mp4"); }); $("#btnright").click(function() //right navigation function { vidcount = vidcount + 1; if(vidcount > total) { vidcount = 1; } else if(vidcount < 1) { vidcount = total; } $("#vid").attr("src","videos/video"+ vidcount + ".mp4"); }); }); </script> </body> </html> |