Javascript 在特定时间加载BLOB视频
例如,我希望加载一个BLOB视频,如Youtube或Netflix。 也就是说,在BLOB中从0到10秒加载视频,显示它,然后从10到20秒加载视频 我考虑过编写这段代码(它在没有#t=0,10的情况下工作,但在返回之前等待整个视频加载) 提前感谢,Javascript 在特定时间加载BLOB视频,javascript,video,blob,Javascript,Video,Blob,例如,我希望加载一个BLOB视频,如Youtube或Netflix。 也就是说,在BLOB中从0到10秒加载视频,显示它,然后从10到20秒加载视频 我考虑过编写这段代码(它在没有#t=0,10的情况下工作,但在返回之前等待整个视频加载) 提前感谢, 托马斯我不知道Netflix的情况,但对于YouTube,他们不是这么做的 您看到的blob URI是其元素的src,它指向一个对象,而不是一个blob 现在,MediaElementsrc中的#t片段标识符仅适用于MediaElement。 M
托马斯我不知道Netflix的情况,但对于YouTube,他们不是这么做的 您看到的blob URI是其
元素的src
,它指向一个对象,而不是一个blob
现在,MediaElement
src
中的#t
片段标识符仅适用于MediaElement。MediaElements将尝试仅从服务器加载所需的数据。这是由于。但它要求媒体的元数据已经被提取和解析,以便浏览器能够知道下一个要加载的数据位于哪个字节范围。
#t
片段标识符只是告诉浏览器我们只对其中定义的范围感兴趣的一种方式,因此,该片段标识符还需要媒体的元数据是可访问的,并提供正确的字节偏移量
所有这些都表明,您实际上需要在设置此#t
片段标识符的URI上提供完整文件
因此,在您的情况下,您必须从原始URI加载完整文件,并且仅在将设置为
的src
的blob URI上添加片段标识符:
var url=”https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm";
fetch(url)//获取整个文件
.然后(resp=>resp.blob())
.然后(blob=>{
const blobURI=URL.createObjectURL(blob);
const fragId='#t=5'//从5s开始
vid.src=blobURI+fragId;//这里设置fragId
});代码>
视频{高度:100vh}
var query = new XMLHttpRequest();
var videolink = "test.mp4";
var videobalise = $("video");
var get = videolink + "#t=0,10";
query.open("GET", get, true);
query.responseType = "blob";
query.onload = function(){
if(this.status === 200){
var currentTime = videobalise[0].currentTime;
var paused = false;
if(!videobalise[0].paused) paused = true;
window.URL = window.URL || window.webkitURL;
var videoBlob = this.response;
var video = window.URL.createObjectURL(videoBlob);
videobalise.attr("src", video);
videobalise[0].currentTime = currentTime;
if(paused == true){
videobalise[0].play();
}
}
}
query.send();