将视频源更改为 blob / ObjectURL答案

【问题标题】：Change Video source to blob / ObjectURL将视频源更改为 blob / ObjectURL
【发布时间】：2019-05-25 19:48:53
【问题描述】：

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

我已经试过了

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

display('video.mp4');

（此处提供：Display a video from a Blob Javascript）

这不起作用，堆栈已经 5 岁了。

HTML 看起来像这样

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

【问题讨论】：

在该示例中，您必须将 blob 传递给 display 函数，而不仅仅是字符串。
您可以使用 fetch API response.toBlob() 方法将 URL 异步转换为 blob。
看看这个答案，它将视频加载到一个 blob 中，然后加载到页面 - stackoverflow.com/questions/18251632/… - 但请注意，如果你正在加载视频，将会有一个网络调用它引用了您的原始来源，无论您对 javascript 进行了多少混淆，人们都可以找到它......

标签： javascript html video blob

【解决方案1】：

将video 元素中的src 属性直接更改为新的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);
});

【讨论】：

完美运行。

【解决方案2】：

当前代码如下所示

function blobClip(obj){
   var video = obj;
   var sources = video.getElementsByTagName('source');
   var newReq = new Request(sources[0].src);
   fetch(newReq)
   .then(function(response) {        
        return response.blob();
   })
   .then(function(myBlob) {
        var objectURL = URL.createObjectURL(myBlob);
        sources[0].src = objectURL;
   });
}

这并没有真正奏效。我还尝试在 source[0].src 获得新的 objectURL 后添加 video.load()。

我很确定函数调用可能是错误的：我添加了 onloadeddata="blobClip(this);"到视频标签。我也试过 onload 没有成功。

【讨论】：

onloadeddata="blobClip(this);"创建死循环，因为我在创建 URL 后给它命令加载，这会再次触发事件......什么是正确的事件？