HTML5 Видео буферная зона атрибут

по данным

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
• https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
• https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges.start

на buffered атрибут содержит информацию обо всех текущих буферизованных диапазонах времени. Насколько я понимаю, если буферизованная часть потеряна, она удаляется от объекта (в случае, если это когда-либо произойдет).

Esepcially последняя ссылка кажется очень полезной для понимания этого вопроса (поскольку она предлагает образец кода), но имейте в виду, что это документы mozilla, и поддержка может отличаться в других браузерах.

ответить

говорят, что видео начинается. Он продолжается до 1:45 самостоятельно (иногда, возможно, тянет время, ожидая дальнейших данных), после чего я внезапно перескакиваю на 32:45. Сейчас через некоторое время, если я вернусь к 1:27 (в диапазоне времени, первоначально загруженном и воспроизведенном до того, как я сделал прыжок), он начнет играть сразу, как он был уже загружен раньше?

Это должны играть сразу при прыжке назад, если буфер этой части не был выгружен. Я думаю, что очень разумно предположить, что буферы или диапазоны буферов выгружаются в какой-то момент, если общий размер буфера превышает определенный объем.

скажем, я делаю 5 или 6 таких прыжков, каждый раз ожидая несколько секунд для загрузки некоторых данных после прыжка. Означает ли это, что буферизованный объект будет иметь все эти диапазоны времени?

Да, все буферизованные диапазоны должны быть читаемы через атрибут.

будет проверять, имеет ли буферизованный объект один временной диапазон, начинающийся с 0 (забудьте прямую трансляцию) и заканчивающийся на длине продолжительности видео, убедитесь, что весь видеоресурс был полностью заряжен?

Да, это пример кода в последней ссылке. По-видимому, это применимый метод определения того, было ли загружено все видео.

if (buf.start(0) == 0 && buf.end(0) == v.duration)

1. почти каждый браузер сохраняет буферизованные данные в кэше для этого сеанса. Кэш истекает после того, как пользователь уходит с этой страницы. Я не думаю, что пользователю придется загрузить страницу каждый раз, когда он загружает видео, когда видео было загружено. Пользователь столкнется с этой проблемой только тогда, когда сервер очищает все данные кэша. HTML5 video tag будет поддерживать это и сохранит видео до точки, где оно было нагруженный.

2. это не означает, что сеанс был потерян, это означает, что либо объект (если вы используете flash player) ищет некоторые данные из этой конкретной точки или видео тег html5 имеет некоторые проблемы либо из-за сбоя подключения к интернету, или некоторые другие ошибки сервера.

3. метаданные автоматически загружаются, пока вы не используете это <audio preload="none"... Это заставит браузер ничего не загружать с сервера, вы может использовать его как:
   <audio preload="auto|metadata|none"... Если вы используете none, ничего не загружается, если пользователь не нажмет кнопку воспроизведения, и метаданные будут загружать имя, время и другие метаданные с сервера, но не файл каким-то образом, auto начнет загрузку, как только страница загрузится.

Я всегда буду направлять вас, чтобы прочитать некоторые документы jQuery. Поскольку jQuery позволит вам изменять и обновлять контент с помощью ajax API, он также будет полезен. Надеюсь, вам это удастся! Овации.

хотя описание принятого ответа отличное, я решил обновить его образец кода по нескольким причинам:

• задача визуализации прогресса действительно должна быть запущена только на progress событие.
• задача визуализации прогресса смешивается с некоторыми другими задачами, такими как рисование метки времени и позиции playhead.
• код ссылается на несколько элементов DOM по их идентификаторам без использования document.getElementById().
• имена переменных были все затемненный.
• Я думал вперед for() петля была более элегантной, чем обратная while() петли.

обратите внимание, что я удалил playhead и отметку времени, чтобы сохранить код чистым, так как этот ответ фокусируется исключительно на визуализации видеобуфера.

ССЫЛКА НА ОНЛАЙН ВИДЕО БУФЕР ВИЗУАЛИЗАТОР

переписать принятый ответ loop() функция:

function drawProgress(canvas, buffered, duration){
    // I've turned off anti-aliasing since we're just drawing rectangles.
    var context = canvas.getContext('2d', { antialias: false });
    context.fillStyle = 'blue';

    var width = canvas.width;
    var height = canvas.height;
    if(!width || !height) throw "Canvas's width or height weren't set!";
    context.clearRect(0, 0, width, height); // clear canvas

    for(var i = 0; i < buffered.length; i++){
        var leadingEdge = buffered.start(i) / duration * width;
        var trailingEdge = buffered.end(i) / duration * width;
        context.fillRect(leadingEdge, 0, trailingEdge - leadingEdge, height);
    }
}