Показать сообщение отдельно
  #1 (permalink)  
Старый Вчера, 15:38
Аватар для cupoma58
Интересующийся
Отправить личное сообщение для cupoma58 Посмотреть профиль Найти все сообщения от cupoma58
 
Регистрация: 10.11.2016
Сообщений: 16

Вертикальный прогресс-бар, смена направления прогрсса
Есть рабочий плеер, для сайта, с вертикальным прогрессом воспроизведения и звука.
HTML:
Код:
<span class="progres-bar" title="прогресс"><span class="progres"></span></span>
CSS:
Код:
.progres-bar {
    position: absolute;
    width: 30px;
    height: 68%;
    top: 0;
    right: 0; 
    display: flex;
    align-items: flex-start;               /* сверху-вниз, по оси Y */
    background: #696969;
    cursor: pointer; 
}
.progres {
    -webkit-transition: height 0.6s ease;   
    height: 0;
    width: 100%;
    background: #cc7600; 
}
JS:
Код:
    var size = (video.currentTime * 100) / video.duration; 
    progres.style.height = size + '%'; 
    .....
    var mouseY = e.offsetY;
    progres.style.height = (mouseY * 100) / pb.offsetHeight  + '%';
    .....
    var value = (mouseY * 100) / sb.offsetHeight;
    saund.style.height = value + '%'; 
    video.volume = value / 100;
Прогресс растёт сверху-вниз (по Y) и с выбором эпизода/громкости - всё нормально.
При запуске прогресса снизу-вверх (flex:end), выбор более позднего эпизода - сталкивается с фактическим уменьшение времени воспроизведения.
Что посоветуете?
Изображения:
Тип файла: png web.png (153.3 Кб, 2 просмотров)
Ответить с цитированием