Chrome:播放正在通过FETCH/XHR下载的视频

Chrome: to play a video that is being downloaded via fetch/XHR(Chrome:播放正在通过FETCH/XHR下载的视频)

本文介绍了Chrome:播放正在通过FETCH/XHR下载的视频的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想要实现的是让Chrome将视频文件加载为数据(通过Fetch API、XHR等等),并在下载过程中使用<video>播放视频文件,而无需对同一URL发出两个单独的请求,也无需等待文件完全下载。

从FETCH API(response.body)获取ReadableStream很容易,但是我找不到将其提供给video元素的方法。我想我需要一个blobURL,它可以使用MediaSource对象创建。但是,在Chrome中没有实现SourceBuffer#appendStream方法,它听起来正是所需的,因此我不能将流直接连接到MediaSource对象。

我可以按块读取流,从中创建Uint8Array,并使用SourceBuffer#appendBuffer,但这意味着回放不会立即开始,除非块大小非常小。而且感觉像是手动做一些所有这些API都应该开箱即用就能做的事情。如果没有其他解决方案,我走这条路,我应该期待什么警告?

是否有其他方法可以为ReadableStream创建BLOB URL?或者有没有办法让fetch<video>共享一个请求?新的API太多了,我很容易错过一些东西。

推荐答案

经过几个小时的试验,找到了一个半工作的解决方案:

const video = document.getElementById('audio');

const mediaSource = new MediaSource();

video.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', async () => {

  const sourceBuffer = mediaSource.addSourceBuffer('audio/webm; codecs="opus"');

  const response = await fetch(audioSRC);

  const body = response.body

  const reader = body.getReader()

  let streamNotDone = true;

  while (streamNotDone) {

    const {value, done} = await reader.read();
    
    if (done) {streamNotDone = false; break;}
    
    await new Promise((resolve, reject) => {
      sourceBuffer.appendBuffer(value)

      sourceBuffer.onupdateend = (() => {
        resolve(true);
      })
    }) 

  }
});

它适用于https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

另外,我只对WebM/opus格式进行了测试,但我相信它也可以与其他格式一起使用只要您指定它

这篇关于Chrome:播放正在通过FETCH/XHR下载的视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Chrome:播放正在通过FETCH/XHR下载的视频

基础教程推荐