На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> Вертикальный прогресс-бар , Направление прогресса
    Привет.
    Это - плеер.
    Небольшая проблема - в прогресс-блоке. Прогрессы, у меня - вертикальные.
    Индикатор прогресса (верхний):
    ExpandedWrap disabled
      <span class="progres-bar"><span class="progres"></span></span>

    ExpandedWrap disabled
      .progres-bar {
          position: relative;
          width: 100%;
          height: 68%;
          margin-top: 3px;
          display: flex;
          align-items: flex-start;
          background: #696969;
          cursor: pointer;
      }
      .progres {
          -webkit-transition: height 0.6s ease;
          height: 0;
          width: 100%;
          background: #cc7600;
      }

    ExpandedWrap disabled
      // инициация прогресса:
      video.addEventListener('timeupdate', () => {
          var size = (video.currentTime * 100) / video.duration;
          progres.style.height = size + '%';    
          elapsed.innerHTML = setTime(video.currentTime);
      });
       
      // выбор эпизода:
      pb.addEventListener('click', (e) => {
          var mouseY = e.offsetY;
          progres.style.height = (mouseY * 100) / progres-bar.offsetHeight  + '%';    
          video.currentTime = (video.duration * mouseY) / progres-bar.offsetHeight;  
      });

    Индикатор звука (нижний):
    ExpandedWrap disabled
      <span class="saund-bar"><span class="saund"></span></span>

    ExpandedWrap disabled
      .saund-bar {
          position: relative;
          width: 100%;
          height: 27%;
          margin-top: 3px;
          display: flex;
          align-items: flex-start;    
          background: #696969;
          cursor: pointer;
      }
      .saund {
          -webkit-transition: height 0.6s ease;
          height: 10%;
          width: 100%;
          background: #cc7600;
      }

    ExpandedWrap disabled
      // выбор уровня громкости:
      sb.addEventListener('mousedown', (e) => {
          var mouseY = e.offsetY,
              value = (mouseY * 100) / saund-bar.offsetHeight;
          saund.style.height = value + '%';
          video.volume = value / 100;  
      });

    Оба прогресса, адекватно, работают т о л ь к о сверху-вниз (Х-вправо, Y-вниз).
    Если поменять flex-start на flex-end, т.е. - снизу-вверх, значения, при выборе,
    меняются - само-произвольно.
    Что посоветуете?

    Прикреплённый файлПрикреплённый файлweb.png (153,32 Кбайт, скачиваний: 3)
      Сделать два span. Первый для не занатой области, а второй для прогресса
        Цитата macomics @
        Сделать два span

        Да, хоть - три. Для JS, рост прогресса/времени - идёт сверху-вниз (mouseY). Выбирая более поздний эпизод - наталкиваешься на уменьшение времени,с начала воспроизведения.
          Цитата cupoma58 @
          Да, хоть - три. Для JS, рост прогресса/времени - идёт сверху-вниз (mouseY). Выбирая более поздний эпизод - наталкиваешься на уменьшение времени,с начала воспроизведения.
          Ничего не понял, но очень интересно.

          Так считать не пробовали?
          ExpandedWrap disabled
            // выбор уровня громкости:
            sb.addEventListener('mousedown', (e) => {
                const value = e.offsetY / saund-bar.offsetHeight;
                const percent1 = 100 * value;
                const percent2 = 100 - percent1;
                // отступ
                saund2.style.height = `{percent2}%`;
                // прогресс
                sound.style.height = `{percent1}%`;
                video.volume = value;  
            });
          Сообщение отредактировано: macomics -
            Решение найдено - тема закрыта.
            0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
            0 пользователей:


            Рейтинг@Mail.ru
            [ Script execution time: 0,0253 ]   [ 16 queries used ]   [ Generated: 5.12.24, 17:21 GMT ]