主页 / 问题 / 1425530
Accepted
Дмитрий Варзанов
Asked:2022-08-31 00:32:11 +0000 UTC2022-08-31 00:32:11 +0000 UTC

在将视频插入 html 之前开始上传视频

  • 772

任务是开始上传视频，然后将其插入。更准确地说，更改当前 src 属性的值，以便视频开始播放而不会冻结。

我该怎么做。

  1. 视频当前正在播放，我在 javascript 中创建了第二个视频对象
  2. 我广播到onloadeddata监听器对象
  3. 已知 url，接下来要播放的媒体文件
  4. 距离当前视频播放结束，还剩 5 秒。在 5 秒内，我插入没有 html 文档的第二个视频，或者更确切地说，我更改了 src 属性。
  5. 接下来， onloadeddata监听器触发，表明数据已经加载。
  6. 从 html 文档中，我删除了当前的 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()))

};

javascript video

1 个回答

  1. Best Answer

    fetch通过开始提前上传视频Blob。video然后为with设置 URL 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();
};

    纯粹理论上它应该工作。

    • 3

相关问题