JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.2/rxjs.umd.js"></script>
<!--<div class='video_wrapper'>
  <video width="400" id="myVideo">
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <div class='playPause' id='playPause'>
    <i class="fas fa-play"></i>
  </div>
</div>-->

<div class="demo">
  <svg class="progress" width="190" height="190" viewBox="0 0 190 190">
    <circle class="progress_meter" cx="96" cy="96" r="88" stroke-width="12" />
    <circle class="progress_value" cx="96" cy="96" r="88" stroke-width="12" />
  </svg>
  <div class='video_wrapper'>
    <video width="400" id="myVideo">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
      <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    </video>
    <div class='playPause' id='playPause'>
      <i class="fas fa-play"></i>
    </div>
  </div>
  <input id="control" type="range" value="0" />
</div>

CSS

.video_wrapper {
  border-radius: 166px;
  width: 166px;
  height: 166px;
  overflow: hidden;
  position: absolute;
  top: 12px;
  left: 14px;
  box-shadow: 0px 1px 8px;
}

.playPause {
  top: 48px;
  left: 48px;
  border-radius: 58px;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 1000;
  box-shadow: 0px 1px 18px;
  opacity: .4;
  border: 5px solid #fff;
  display: none;
}

.playPause .fa-play {
  top: 13px;
  left: 18px;
  font-size: 36px;
  color: #fff;
  position: absolute;
}

.demo {
  /*.u-absoluteCenter();
    .u-flexCenter();
    flex-direction: column;
    
    :first-child {
        margin-bottom: 20px;
    }*/
  position: relative;
}

.progress {
  transform: rotate(-90deg);
}
#control {
  display:none;
}

.progress_meter,
.progress_value {
  fill: none;
}

.progress_meter {
  stroke: #e6e6e6;
}

.progress_value {
  stroke: #f77a52;
  /*stroke-linecap: round;*/
}

JavaScript

var player = document.querySelector("#myVideo"); 
var playPause = document.querySelector("#playPause");
var elms = document.querySelectorAll("#myVideo,#playPause");

var control = document.getElementById('control');
var progressValue = document.querySelector('.progress_value');

var RADIUS = 88;
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;

function progress(value) {
  //var progress = value / 100;
  var progress = value / 50;
  var dashoffset = CIRCUMFERENCE * (1 - progress);

  //console.log('progress:', value + '%', '|', 'offset:', dashoffset)

  progressValue.style.strokeDashoffset = dashoffset;
}

elms.forEach((v) => {
  v.addEventListener('click', function() {
    if (player.paused) {
      player.play();
      playPause.setAttribute('style', "display:none");
    } else {
      player.pause();
      playPause.setAttribute('style', "display:block");
    }
  });
});

player.ontimeupdate = function() {
  progress(player.currentTime);

  var endVid = setInterval(function() {
    if (player.ended) {
      playPause.setAttribute('style', "display:block");
      clearInterval(endVid);
    }
  }, 10);
};

function autoPlayVid() {
  player.setAttribute('autoplay', true);
}

window.onload = autoPlayVid();

control.addEventListener('input', function(event) {
  progress(event.target.valueAsNumber);
});

progressValue.style.strokeDasharray = CIRCUMFERENCE;
progress(1);

autoPlayVid();