将视频源更改为 blob / ObjectURL

Question

我想隐藏视频源的属性。因此，我想将视频源标签的 src 属性转换为 objectURL。遗憾的是它不起作用。

我已经试过了

function display(vid){
    var video = document.getElementById("video");
    video.src = window.URL.createObjectURL(vid);
}

display('video.mp4');

（此处提供：显示来自 Blob Javascript 的视频）

那行不通，Stack 已经有 5 年历史了。

HTML 看起来像这样

<video id="video">
   <source type="video/mp4" src="video.mp4">
</video>

Answer 1

src将video元素处的属性直接更改为新的 blob URL。

一个对我有用的例子：

HTML：

<video width="320" height="240" controls></video>

JS：

function changeVideoSource(blob, videoElement) {
  var blobUrl = URL.createObjectURL(blob);
  console.log(`Changing video source to blob URL "${blobUrl}"`)
  videoElement.src = blobUrl;
  videoElement.play();
}

function fetchVideo(url) {
  return fetch(url).then(function(response) {        
    return response.blob();
  });
}

fetchVideo('https://wherever.com/video.mp4').then(function(blob) {
  changeVideoSource(blob, video);
});