Видео предварительного preloader HTML5 (индикатор выполнения заполняется быстрее, чем видео заканчивается файлом)

63
6

У меня проблема. Полоса выполнения заполняется быстрее, чем видео заканчивается файлом. Полоса хода заполнена, и видео еще не закончено.

$('.media_audio_player').bind('timeupdate' ,function() {
var id = $(this);
var idn = 'AudioBar_wrap\+'+this.id.split('rolf')[1];
var canvas = document.getElementById(idn);

if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var lingrad = ctx.createLinearGradient(0,0,0,150);
var fWidth = (id.get(0).currentTime / id.get(0).duration) * (canvas.clientWidth);

if (fWidth > 0) {
lingrad.addColorStop(0, '#ebbdbd');
lingrad.addColorStop(0.5, '#dd6060');
lingrad.addColorStop(1, '#dc4c4c');
ctx.fillStyle = lingrad;
ctx.fillRect(0, 0, fWidth, 150);
}
}
});

Любая помощь будет принята с благодарностью.

спросил(а) 2021-01-25T19:34:44+03:00 4 месяца, 2 недели назад
1
Решение
108

var progress = Math.floor(video.currentTime) / Math.floor(video.duration);
controls.progress[0].style.width = Math.floor(progress * controls.total.width()) + "px";

ответил(а) 2021-01-25T19:34:44+03:00 4 месяца, 2 недели назад
100

также вы можете сделать следующее:

var fWidth = (id.get(0).currentTime / id.get(0).duration) * (CanvasWidth);

где CanvasWidth = холст длины, который заполняется до завершения воспроизведения файла. в твоем случае:

var fWidth = (id.get(0).currentTime / id.get(0).duration) * (300);

ответил(а) 2021-01-25T19:34:44+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема