3

Задача в том, чтобы начать подгружать видео, а затем вставить его. Точнее изменить значение текущего атрибута src так, чтобы видео начало проигрываться без подвисания.

Как делаю это я.

  1. В текущий момент проигрывается видео, создаю второй объект video в javascript
  2. Вещаю на объект слушатель onloadeddata
  3. Известен url, медиафайла, который необходимо проиграть следующим
  4. До окончания проигрывания текущего video, остается 5 секунд. За 5 секунд, вставляю во второй video которого нет html документе, вернее меняю src атрибут.
  5. Далее срабатывает слушатель onloadeddata, говорит о том, что данные подгружены.
  6. Из html документа, удаляю текущий video тег и меняю его на второй объект который. Сразу как сработал слушатель.

Такое впечатление, что я делаю что то не то.

Вопрос собственно в следующем. Возможно ли подгружать данные последующего видео, точнее сделать так, чтобы не удалять текущий тег video. А просто изменить его атрибут src, но так чтобы знать что слушатель onloadeddata дал добро. Что данные видео подгружены и оно может начаться без подвисания. Сразу как меняем атрибут src??

Надеюсь, что я был услышан.

Не понимаю, что тут делаю не так

video.src = URL.createObjectURL(source = new MediaSource); source.onsourceopen = _ => {

// Начинаем подгрузку
(buffer = source.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')).onupdateend = _ => {
    // Подгрузка закончена, видео полностью загружено
    source.endOfStream();
    video.muted = true;
    video.play();
};
buffer.appendBuffer(fetch('frag_bunny.mp4').then(r => r.arrayBuffer()))

};

1
  • А чем не устраивает эта схема?
    – Qwertiy
    30 июн 2022 в 18:13

1 ответ 1

2

Начинайте грузить видео заранее через fetch в Blob. Затем задайте URL для video с помощью URL.createObjectURL().

const videoElement = document.querySelector('video');

let preloadedVideo;
let preloading = false;

/**
* Предзагрузка следующего видео в виде блоба
*/
async preloadNextVideo = (url) => {
    preloading = true;
    const blob = await fetch(url).then(res => res.blob());
    return URL.createObjectURL(blob);
};

/** 
* Когда видео в videoElement почти закончилось
*/
videoElement.timeupdate = (event) => { // или не timeupdate
 // Определяем, что текущее видео почти закончилось, начинаем предзагрузку следующего
 preloadedVideo = null;
 if (almostEnded && !preloading && !preloadedVideo) preloadedVideo = preloadNextVideo(url);
};

/** 
* Когда видео в videoElement закончилось
*/
videoElement.ended = (event) => {
 videoElement.src = preloadedVideo;
};

Таким образом даже не надо будет создавать второй элемент video, а использовать уже созданный.

Код не тестировался, считайте, что это псевдокод, чтобы передать суть.

UPD

Как заметил @Qwertiy, нужно копать в сторону MediaSource. Это определенно лучше чем метод с Blob, т.к новое видео может не успеть догрузиться до конца предыдущего. MediaSource эту проблему решает, т.к будет подгружать новое видео даже когда начнется его воспроизведение.

Должно получится нечто подобное:

const videoElement = document.querySelector('video');

let preloadedVideo;

const MIME = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

/**
* Предзагрузка следующего видео в виде ArrayBuffer
*/
async preloadNextVideo = (url) => {
    const arrayBuffer = await fetch(url).then(res => res.arrayBuffer());
    return arrayBuffer;
};

/** 
* Когда видео в videoElement почти закончилось
*/
videoElement.timeupdate = (event) => { // или не timeupdate
    // Определяем, что текущее видео почти закончилось, начинаем предзагрузку следующего
    if (almostEnded && !(preloadedVideo?.readyState == 'open')) {
        if ('MediaSource' in window && MediaSource.isTypeSupported(MIME)) {
            const preloadedVideo = new MediaSource();
            
            preloadedVideo.addEventListener('sourceopen', function(arrayBuffer) {
                // Начинаем подгрузку
                const sourceBuffer = this.addSourceBuffer(MIME);
                sourceBuffer.addEventListener('updateend', (_event) => {
                    this.endOfStream();
                    // Подгрузка закончена, видео полностью загружено
                });
                sourceBuffer.appendBuffer(preloadNextVideo(url));
            });
        }
    }
};

/** 
* Когда видео в videoElement закончилось
*/
videoElement.ended = (event) => {
    videoElement.src = URL.createObjectURL(preloadedVideo);
    videoElement.play();
};

Чисто в теории должно работать.

8
  • 1
    Если видео большое, то не очень логично его всё грузить. А если грузить не весь, то я не уверен, сработает ли кэш.
    – Qwertiy
    30 июн 2022 в 18:11
  • 1
    А, стоп, у тебя другая идея - та на blob создаёшь url. Но всё равно файл должен полностью загрузиться. Возможно, надо в сторону MediaSource рыть.
    – Qwertiy
    30 июн 2022 в 18:13
  • 1
    @Qwertiy, да, определенно, метод через Blob довольно топорный и для больших видео не подойдет. Добавил вариант с MediaSource, он уж точно будет получше.
    – Neverm1ndo
    30 июн 2022 в 19:23
  • 1
    @ДмитрийВарзанов как узнать url из блоба? Никак. Blob - это просто сырые данные, там нет записи откуда эти данные взялись. Открывайте сурс код, там есть переменная assetURL из нее можно понять, что ссылкой на видео будет nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4.
    – Neverm1ndo
    1 июл 2022 в 9:15
  • 1
    @ДмитрийВарзанов XHR или fetch - не принципиально. Запрос должен работать в любом случае.
    – Neverm1ndo
    1 июл 2022 в 19:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.