將視頻源更改為 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

將video元素的src屬性直接更改為新的 blob URL。

---

一個對我有用的例子：

HTML:

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

記者：

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);
});

Answer 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 但沒有成功。