Свойства атрибутов буферизации HTML5

Ответ 1

Способ буферизации видео зависит от реализации браузера и поэтому может варьироваться от браузера к браузеру.

Различные браузеры могут использовать разные факторы, чтобы определить, сохранять или отбрасывать часть буфера. Старые сегменты, дисковое пространство, память и производительность являются типичными факторами.

Единственный способ узнать это - "увидеть", что загружает браузер.

Например - в Chrome я играл несколько секунд, затем пропустил до 30 секунд, и вы можете видеть, что он начинает загружать другую часть, начиная с этой позиции.

(Похоже, что буфер также ограничен ключевыми кадрами, поэтому в этом буфере можно декодировать n-кадры. Это означает, что буфер может начать загружать данные немного раньше фактической позиции).

Я предоставил демо-видео длиной около 1 минуты - однако этого недостаточно для правильного тестирования. Бесплатное предоставление видео ссылок, которые содержат более длинное видео (или, пожалуйста, поделитесь, если вы хотите, чтобы я обновил демо с этим).

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

Вы можете нажать (немного не перетаскивать) на это средство просмотра, чтобы переместить видео в разные позиции.

/// buffer viewer loop (updates about every 2nd frame)
function loop() {

    var b = vid.buffered,  /// get buffer object
        i = b.length,      /// counter for loop
        w = canvas.width,  /// cache canvas width and height
        h = canvas.height,
        vl = vid.duration, /// total video duration in seconds
        x1, x2;            /// buffer segment mark positions

    /// clear canvas with black
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, w, h);

    /// red color for loaded buffer(s)
    ctx.fillStyle = '#d00';

    /// iterate through buffers
    while (i--) {
        x1 = b.start(i) / vl * w;
        x2 = b.end(i) / vl * w;
        ctx.fillRect(x1, 0, x2 - x1, h);
    }

    /// draw info
    ctx.fillStyle = '#fff';

    ctx.textBaseline = 'top';
    ctx.textAlign = 'left';
    ctx.fillText(vid.currentTime.toFixed(1), 4, 4);

    ctx.textAlign = 'right';
    ctx.fillText(vl.toFixed(1), w - 4, 4);

    /// draw cursor for position
    x1 = vid.currentTime / vl * w;

    ctx.beginPath();
    ctx.arc(x1, h * 0.5, 7, 0, 2 * Math.PI);
    ctx.fill();

    setTimeout(loop, 29);
}

Ответ 2

Согласно

• 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)

Ответ 3

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

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

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

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

Ответ 4

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

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

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

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

Переписать принятую функцию ответа 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 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);
    }
}