MediaSource и fetch

Question

    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();
        };
   
        (xhr = new XMLHttpRequest).open('get', 'frag_bunny.mp4');
        xhr.responseType = 'arraybuffer';
        xhr.onload = _ => {
            console.log(xhr.response);
            buffer.appendBuffer(xhr.response);

        }
        xhr.send();
    };

<video id=video controls mute></video>

Данный код рабочий, просто необходим видеофайл на сервер с именем frag_bunny.mp4

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(url).then(res => res.arrayBuffer()));
    };

Вопрос в том, как сделать чтобы вместо xhr применить fetch? Не выходит...

Answer 1

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();
    };
   
    fetch('frag_bunny.mp4')
        .then((response) => {
            return response.arraybuffer();
        })
        .then((data) => {
            buffer.appendBuffer(data.response);
        });
};

вообще, onupdateend() нужен в основном типо для вывода ссообщения об окончании предзагрузки видеофайла без его воспроизведения. Воспроизводить браузер готов и без этого, а об окончании предзагрузки говорит прекращение анимации предзагрузки, (типа вращение разорванной окружности) а в авторежиме с окончанием предзагрузки начинается воспроизведение:

fetch('frag_bunny.mp4')
    .then((response) => {
        return response.blob();
    })
    .then((data) => {
        video.src = URL.createObjectURL(data);
        video.muted = true;
        video.play();
    });

БЛОГ НА HUSL

MediaSource и fetch

Ответы (1 шт):