Изменить источник видео на blob / ObjectURL

Question

Я хотел бы скрыть атрибут источника видео.Поэтому я хотел преобразовать атрибут src тега source видео в objectURL.К сожалению, это не работает.

Я уже пробовал

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

display('video.mp4');

(как указано здесь: Отображение видео с Javascript Blob )

Это не сработало, и стеку уже 5 лет.

HTML Выглядит так

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

Answer 1

Измените атрибут src в элементе video непосредственно на новый 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);
});

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

Это не сработало.Я также попытался добавить video.load () после того, как source [0] .src получил новый objectURL.

Я почти уверен, что вызов функции может быть неправильным: я добавил onloadeddata = "blobClip (this);"на видео тег.Я также попытался загрузить безуспешно.