Video Player For Website

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800">
<style>

*, *::before, *::after {
  box-sizing: border-box;
  outline: none;
}

body {
  margin: 0;
  padding: 0;
  background: #eee;
  position: relative;
}

a, a:hover, a:focus {
  display: inline-block;
  text-decoration: none;
  color: #fff;
}

h1, h2, h3, h4, h5, h6, p, a, li, button {
  margin: 5px 0;
  font-family: "Open Sans", sans-serif;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

button {
  background: none;
  border: none;
}

.container {
  width: 100%;
  padding: 0 40px;
  max-width: 1300px;
  margin: 0 auto;
  clear: both;
}
.container::after {
  content: "";
  display: block;
  clear: both;
}

body::-webkit-scrollbar {
  width: 4px;
}

body::-webkit-scrollbar-thumb {
  background-color: #555;
}

body {
  min-height: 100vh;
}

.container {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

header {
  padding: 20px 0;
  text-align: center;
}
header h1 {
  font-size: 50px;
  font-weight: 700;
  color: #39a072;
}
@media (max-width: 768px) {
  header h1 {
    font-size: 30px;
  }
}
@media (max-width: 480px) {
  header h1 {
    font-size: 25px;
  }
}
header h1 span:first-of-type {
  font-size: 25px;
  font-weight: 300;
  color: #222;
}
header h1 span:last-of-type {
  font-size: 25px;
  font-weight: 300;
  color: #222;
}
header p {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 1.6em;
  margin-top: 10px;
}

#videoContainer {
  width: 70vw;
  height: 65vh;
  background: #39a072;
  margin: 30px auto;
  border-radius: 5px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#videoContainer.fullScreen {
  width: 100vw !important;
  height: 100vh !important;
}
#videoContainer.small .intensityBar {
  width: 50px !important;
}
#videoContainer.small .playButton {
  margin: 0 !important;
  margin-right: 5px !important;
}
#videoContainer.small .timer {
  display: none !important;
}
#videoContainer.small .playPause, #videoContainer.small .volume .icon, #videoContainer.small .scale .icon {
  width: 15px !important;
  height: 15px !important;
}
#videoContainer.small .progressBar {
  height: 6px !important;
}
#videoContainer.small .overlay .button {
  width: 50px !important;
  height: 50px !important;
}
#videoContainer.small .time {
  display: none !important;
}
#videoContainer .overlay {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(77, 191, 140, 0.9), rgba(41, 115, 82, 0.9));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  border-radius: 5px;
}
#videoContainer .overlay .button {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(https://webdevtrick.com/wp-content/uploads/playBTN.svg);
  background-size: 100% 100%;
  transform: translate(-50%, calc(-50% - 30px));
  cursor: pointer;
  transition: width 0.2s, height 0.2s;
}
#videoContainer .overlay .button:hover {
  width: 90px;
  height: 90px;
}
#videoContainer #video {
  width: 100%;
  height: calc(100% - 60px);
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#videoContainer #video video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
#videoContainer #video video::-webkit-media-controls-enclosure {
  display: none !important;
}
#videoContainer #controls {
  width: 100%;
  height: 60px;
  background: #4dbf8c;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 2147483647;
}
#videoContainer #controls.is-visible {
  transform: translateY(0);
}
#videoContainer #controls .playButton {
  width: 70px;
  height: 100%;
  background: #4dbf8c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  cursor: pointer;
  transition: all 0.4s;
  border-bottom-left-radius: 5px;
}
#videoContainer #controls .playButton:hover {
  background: #41b682;
}
#videoContainer #controls .playButton .playPause {
  width: 25px;
  height: 25px;
  background: url(https://webdevtrick.com/wp-content/uploads/play.svg);
  background-size: 100% 100%;
}
#videoContainer #controls .ProgressContainer {
  color: #fff;
  width: calc(100% - 100px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
#videoContainer #controls .ProgressContainer .progressBar {
  width: 100%;
  height: 8px;
  background: #39a072;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
}
#videoContainer #controls .ProgressContainer .progressBar:hover + .time {
  opacity: 1;
  transform: translateY(0);
}
#videoContainer #controls .ProgressContainer .progressBar .progress {
  width: 0%;
  height: 100%;
  background: #fff;
  border-radius: 20px;
}
#videoContainer #controls .ProgressContainer .timer {
  margin: 0 10px;
  font-family: Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  font-weight: 300;
  color: #2c7a57;
  letter-spacing: 1px;
}
#videoContainer #controls .ProgressContainer .time {
  width: 80px;
  height: 25px;
  background: #2c7a57;
  position: absolute;
  top: -20px;
  left: 0;
  border-radius: 5px;
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(10px);
  transition: transform 0.3s, opacity 0.3s;
}
#videoContainer #controls .ProgressContainer .time::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 25px;
  left: 33px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #2c7a57;
}
#videoContainer #controls .volume {
  width: 150px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
#videoContainer #controls .volume .icon {
  width: 25px;
  height: 25px;
  background: url(https://webdevtrick.com/wp-content/uploads/volume.svg);
  background-size: 100% 100%;
  cursor: pointer;
  margin-right: 10px;
}
#videoContainer #controls .volume .intensityBar {
  width: 100px;
  height: 4px;
  background: #39a072;
  border-radius: 20px;
  max-width: 100px;
  overflow: hidden;
  transform-origin: right center;
  cursor: pointer;
  transition: all 0.5s;
}
#videoContainer #controls .volume .intensityBar .intensity {
  width: 50%;
  height: 100%;
  background: #fff;
}
#videoContainer #controls .scale {
  width: 70px;
  height: 100%;
  background: #4dbf8c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  cursor: pointer;
  transition: all 0.4s;
  border-bottom-right-radius: 5px;
}
#videoContainer #controls .scale:hover {
  background: #40b27f;
}
#videoContainer #controls .scale .icon {
  width: 25px;
  height: 25px;
  background-size: 100% 100%;
  background: url(https://webdevtrick.com/wp-content/uploads/expand.svg);
  background-size: 100% 100%;
}

</style>

</head>
<body>

<header>
   <div class="container">
      <h1>
        <span>Html, CSS, jQuery</span>
        <span>Video</span>
        <span>Player</span>
      </h1>
   </div>
</header>

</div>

'use strict';

var play_pause     = $('.playButton'),
        container      = $('#videoContainer'),
        playIcon       = $('.playButton .playPause'),
        video          = $('video'),
        play           = $('.play'),
        volume         = $('.volume .icon'),
        volumeIntesity = $('.volume .intensityBar'),
        intensity      = $('.intensity'),
        progressBar    = $('.progressBar'),
        progress       = $('.progressBar .progress'),
        timer          = $('.intialTime'),
        vidDuration    = $('.fullTime'),
        expandButton   = $('.scale'),
        overlayScreen  = $('.overlay'),
        timeState      = $('.time'),
        overlayButton  = $('.overlay .button'),
        update;

$(window).resize(function () { resizeVid(); });

resizeVid();

updateplayer();

play_pause.add(video).click(function () { playVid(); });

progressBar.click(function () {skip(); });

progressBar.mousemove(function () { timeState.text(getTimeState()); });

volume.click(function () { toggleMute(); });
  
    expandButton.click(function () {

$(this).toggleClass('active');

if ($(this).hasClass('active')) {
         $('#controls').addClass('is-visible');
         fullScreen();
      } else {
         $('#controls').removeClass('is-visible');
         exitTheFullScreen();
      }
   });

volumeIntesity.click(function () { changeVolume(); });

overlayButton.click(function () { playVid();});
  
    vidDuration.text(getFormatedFullTime());

function playVid() {
        if (video.get(0).paused) {
            video.get(0).play();
            playIcon.css({
               'background': 'url(https://webdevtrick.com/wp-content/uploads/pause.svg)',
               'background-size': '100% 100%'
            });
            overlayScreen.hide();
            update = setInterval(updateplayer, 1);

} else {
            video.get(0).pause();
            playIcon.css({
               'background': 'url(https://webdevtrick.com/wp-content/uploads/play.svg)',
               'background-size': '100% 100%'
            });
            overlayScreen.show();
            clearInterval(update);
        }
    }
  
    function updateplayer() {
        var percentage = (video[0].currentTime / video[0].duration) * 100;
        progress.css({'width': percentage + '%'});
        timer.text(getFormatedTime());
        vidDuration.text(getFormatedFullTime());

if (video[0].ended) {
            playIcon.css({
               'background': 'url(https://webdevtrick.com/wp-content/uploads/play.svg)',
               'background-size': '100% 100%'
            });
            overlayScreen.show();
            overlayButton.css({
               'background': 'url(https://webdevtrick.com/wp-content/uploads/replay.svg)',
               'background-size': '100% 100%'
            });
        } else if (video[0].paused) {
            overlayButton.css({
               'background': 'url(https://webdevtrick.com/wp-content/uploads/playBTN.svg)',
               'background-size': '100% 100%'
            });
        }
    }

function getTimeState() {

var mouseX = event.pageX - progressBar.offset().left,
          width  = progressBar.outerWidth();

var currentSeconeds = Math.round((mouseX / width) * video[0].duration);
       var currentMinutes  = Math.floor(currentSeconeds/60);

if (currentMinutes > 0) {
          currentSeconeds -= currentMinutes * 60;
       }
       if (currentSeconeds.toString().length === 1) {
           currentSeconeds = "0" + currentSeconeds;
        }
        if (currentMinutes.toString().length === 1) {
            currentMinutes = "0" + currentMinutes;
        }

timeState.css('left', (mouseX / width) * progressBar.width() + 18 + 'px');

return currentMinutes + ':' + currentSeconeds;

}

function skip() {
        var mouseX = event.pageX - progressBar.offset().left,
            width  = progressBar.outerWidth();
       video[0].currentTime = (mouseX / width) * video[0].duration;
       updateplayer();
    }

function getFormatedFullTime() {

function getFormatedTime() {
         var seconeds = Math.round(video[0].currentTime);
         var minutes  = Math.floor(seconeds / 60);

if (minutes > 0) {
            seconeds -= minutes * 60;
         }
         if (seconeds.toString().length === 1) {
             seconeds = "0" + seconeds;
          }
          if (minutes.toString().length === 1) {
              minutes = "0" + minutes;
          }
         return minutes + ':' + seconeds;
     }

function changeVolume() {
       var mouseX = event.pageX - volumeIntesity.offset().left,
           width  = volumeIntesity.outerWidth();

video[0].volume = (mouseX / width);
       intensity.css('width', (mouseX / width) * width + 'px');
       video[0].muted = false;
       volume.css({
          'background': 'url(https://webdevtrick.com/wp-content/uploads/volume.svg)',
          'background-size': '100% 100%'
       });
       intensity.show();
    }

}
  
    function exitTheFullScreen() {
        if (document.webkitExitFullscreen()) {
           document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen()) {
           document.mozCancelFullScreen();
        } else if (document.msExitFullscreen()) {
           document.msExitFullscreen();
        } else {
           video.dblclick(function () { fullScreen(); });
        }
    }

function resizeVid() {
       if (container.width() < 600) {
          container.addClass('small');
       } else {
          container.removeClass('small');
       }
    }

$(window).keypress(function (e) {
       if (e.keyCode === 0 || e.keyCode === 32) {
          e.preventDefault()
          playVid();
       }
    });
  
    for (var i = 0, l = videos.length; i < l; i++) {
    var video = videos[i];
    var src = video.src || (function () {
        var sources = video.querySelectorAll("source");
        for (var j = 0, sl = sources.length; j < sl; j++) {
            var source = sources[j];
            var type = source.type;
            var isMp4 = type.indexOf("mp4") != -1;
            if (isMp4) return source.src;
        }
        return null;
    })();
    if (src) {
        var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
        if (isYoutube) {
            var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
            id = (id.length > 1) ? id.splice(1) : id;
            id = id.toString();
            var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
            video.src = mp4url + id;
        }
    }
}

});

</script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Video Player For Website