HTML5 Player with jQuery

by Andrey Dobrovoi

HTML

<header>
   <div class="container">
      <h1>
        <span>Html5</span>
        <span>Video</span>
        <span>Player</span>
      </h1>
   </div>
</header>


<div id="videoContainer">

   <div class="overlay">
      <div class="button"></div>
   </div>

   <div id="video">
      <video src="https://goo.gl/q0j3E7">
      </video>
   </div>

   <div id="controls">
      <div class="playButton">
         <div class="playPause"></div>
      </div>

      <div class="ProgressContainer">
         <div class="timer intialTime">
            00:00
         </div>
         <div class="progressBar">
            <div class="progress"></div>
         </div>
         <div class="time">
            00:00
         </div>
         <div class="timer fullTime">
            00:00
         </div>
      </div>

      <div class="volume">
         <div class="icon"></div>

         <div class="intensityBar">
            <div class="intensity"></div>
         </div>
      </div>

      <div class="scale">
         <div class="icon"></div>
      </div>
   </div>

</div>

CSS

*, *::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: #444;
}
@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 {
 ...

JavaScript

$(document).ready(function () {

    '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://goo.gl/OnSWWI)',
               'background-size': '100% 100%'
            });
            overlayScreen.hide();
            update = setInterval(updateplayer, 1);

        } else {
            video.get(0).pause();
            playIcon.css({
              ...