Получение координаты Y от начало объекта до конца или слайдер громкости для видео плеера

function DOMLoad() { 
  player.load(); 
} 
addEventListener('DOMContentLoaded', DOMLoad); 
 
var player = { 
  load: function() { 
    this.player(); 
  }, 
  player: function() { 
    var Video = document.querySelector('video'); 
 
    var Control = document.querySelector('.pl-controls'); 
 
    var ControlTime = document.querySelector('aanimtime current'); 
    var ControlEndTime = document.querySelector('aanimtime duration'); 
 
    var ControlVolume = document.querySelector('aanimevolume'); 
    var ControlVolumeLine = document.querySelector('aanimevolume div volumeline'); 
    var ControlVolumeLineDiv = document.querySelector('aanimevolume div'); 
    Video.addEventListener('loadeddata', function(eh) { 
      var MouseDown = false; 
      /* 
       * 
       * Player timers 
       * Current and Duration 
       * 
       * */ 
      ControlTime.innerHTML = this.ToTimeFormat(Video.currentTime); 
      ControlEndTime.innerHTML = this.ToTimeFormat(Video.duration); 
      Video.addEventListener('timeupdate', function() { 
        ControlTime.innerHTML = this.ToTimeFormat(Video.currentTime); 
      }.bind(this)); 
 
      ControlVolumeLineDiv.addEventListener('mousedown', function(e) { 
 
        MouseDown = true; 
 
        ControlVolumeLine.style.top = (1 + (100 / (100 / -e.layerY)) / 100) * 100 + '%'; 
        console.log((1 + (100 / (100 / -e.layerY)) / 100) * 100); 
        console.log(this.offsetTop); 
      }); 
      ControlVolumeLineDiv.addEventListener('mousemove', function() { 
        if (MouseDown) {} else return false; 
      }); 
      ControlVolumeLineDiv.addEventListener('mouseup', function() { 
        MouseDown = false; 
      }); 
    }.bind(this)); 
    /* Control.style.visibility = 'hidden'; 
    Video.addEventListener("mouseenter", function(){ 
        Control.style.visibility = 'visible'; 
    }); 
    Video.addEventListener("mouseout", function(){ 
        Control.style.visibility = 'hidden'; 
    });*/ 
  }, 
  ToTimeFormat: function(s) { 
 
    /* 
     * 
     * Function Int to Time Format 
     * Format - 0:00, 10:00, 1:00:00 
     * Args: s - second; 
     * 
     * Warring - Not Worked > 99:99:99 
     * 
     * */ 
    var second = parseInt(s); 
    var Hours = Math.floor(second / (60 * 60)); 
    var Minutes = Math.floor((second - Hours * (60 * 60)) / 60); 
    var Seconds = Math.floor(second - (Hours * (60 * 60) + Minutes * 60)); 
    if (Minutes < 10 && Hours > 0) Minutes = "0" + Minutes; 
    if (Seconds < 10) Seconds = "0" + Seconds; 
    var Format; 
    if (Hours > 0) Format = Hours + ":" + Minutes + ":" + Seconds; 
    else Format = Minutes + ":" + Seconds; 
    return Format; 
  } 
};

body { 
  background: gray; 
} 
 
.player {} 
 
.player>.pl-controls {} 
 
.player>.pl-controls>aanimtime {} 
 
.player>.pl-controls>aanimtime>current {} 
 
.player>.pl-controls>aanimtime>duration {} 
 
.player>.pl-controls>aanimevolume {} 
 
.player>.pl-controls>aanimevolume>div { 
  position: relative; 
  height: 64px; 
  width: 12px; 
  overflow: hidden; 
} 
 
.player>.pl-controls>aanimevolume>div>volumeline { 
  position: absolute; 
  width: 12px; 
  height: 12px; 
  background: #fff; 
  border-radius: 20px; 
} 
 
.player>.pl-controls>aanimevolume>div>volumeline::before, 
.player>.pl-controls>aanimevolume>div>volumeline::after { 
  content: ''; 
  position: absolute; 
  display: block; 
  left: 50%; 
  margin-left: -2px; 
  width: 4px; 
  height: 64px; 
  border-radius: 20px; 
} 
 
.player>.pl-controls>aanimevolume>div>volumeline:before { 
  top: 50%; 
  background: #fff; 
} 
 
.player>.pl-controls>aanimevolume>div>volumeline:after { 
  top: -58px; 
  background: rgba(255, 255, 255, .3); 
} 
 
.player>.pl-controls>aanimevolume>volumeimg {}

<div class="player"> 
  <video controls> 
       <source src="https://htmlreference.io/assets/HTML%205%20Video.mp4" type="video/mp4"> 
        </video> 
  <div class="pl-controls"> 
    <aanimtime> 
      <current></current> 
      <duration></duration> 
    </aanimtime> 
    <aanimevolume min-volume="0" curret-volume="0" max-volume="100" modifiable="on"> 
      <div> 
        <volumeline></volumeline> 
      </div> 
      <volumeimg></volumeimg> 
    </aanimevolume> 
  </div> 
</div>