我想隐藏视频源的属性。因此,我想将视频源标签的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)
这不起作用,Stack已经有5年了。
HTML看起来像这样
<video id="video">
<source type="video/mp4" src="video.mp4">
</video>
将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);
});
当前代码如下所示
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没有成功。