将视频源更改为Blob / ObjectURL

时间:2018-12-27 21:02:40

标签: javascript html5 video blob

我想隐藏视频源的属性。因此,我想将视频源标签的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>

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:0)

当前代码如下:

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,但没有成功。