2

Здравствуйте. Возникла одна маленькая проблема в создание слайдера громкости для видео плеера.

Если вы мне сможете помочь буду премного благодарен.

Суть проблемы в том что нужно через Events получать координату Y от объекта до его конца. Конечно же у Events есть такие переменный как layerY и offsetY но если их применить то получиться вот это:

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>

Спасибо!

1
  • Так кто-то сможет мне помочь?
    – MrSkoper
    24 авг 2018 в 9:24

1 ответ 1

1

Немного посмотри исходный код других плееров я создал 3 функции UpdateVolume, GetPositions, GetVolume. И получил дробное число подходящее к video.volume.

  UpdateVolume: function(ev, el, player, volumeline, volumelinediv){
      var VolumePx = (1 - this.GetVolume(ev, el).y);
      var VolumeLineHeight = parseInt(getComputedStyle(volumeline).height);
      var VolumeLineDivHeight = parseInt(getComputedStyle(volumelinediv).height);

      var Volume = 1 - (VolumeLineDivHeight * VolumePx) / (VolumeLineDivHeight - VolumeLineHeight);

      player.volume = Math.max(0, Volume);

      if(VolumeLineDivHeight * VolumePx >= VolumeLineDivHeight - VolumeLineHeight){
          return;
      }

      volumeline.style.top = Math.max(0, VolumeLineDivHeight * VolumePx) + 'px';

      console.log(  );
  },

  GetVolume: function(ev, el){
      var Object = {
          top: this.GetPositions(el).top,
          left: this.GetPositions(el).left,
          width: el.clientWidth,
          height: el.clientHeight
      };

      var Event = {
          pageX: ev.pageX,
          pageY: ev.pageY
      };

      if(ev.changedTouches){
          Event = {
              pageX: ev.changedTouches[0].pageX,
              pageY: ev.changedTouches[0].pageY
          };
      }

      var y = (Math.max(0, Math.min(1, (Object.top - Event.pageY + Object.height) / Object.height))).toFixed(2);
      var x = (Math.max(0, Math.min(1, (Event.pageX - Object.left) / Object.width))).toFixed(2);

      return {
          y: y,
          x: x
      };
  },

  GetPositions: function (el) {
      var element = void 0;

      if(el.getBoundingClientRect() && el.parentNode){
          element = el.getBoundingClientRect();
      }

      if(!element){
        return {
            top: 0,
            left: 0
        };
      }

      var doc = document.documentElement;
      var body = document.body;

      var ClientLeft = doc.clientLeft || body.clientLeft || 0;
      var ClientTop = doc.clientTop || body.clientTop;

      var ScrollLeft = doc.pageXOffset || body.scrollLeft || 0;
      var ScrollTop = doc.pageYOffset || body.scrollTop;

      var Left = element.left + ScrollLeft - ClientLeft;
      var Top = element.top + ScrollTop - ClientTop;

      return {
        top: Top,
        left: Left
      };
  }

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.