Question

我想以Youtube或Netflix的形式加载BLOB视频。也就是说，在BLOB中将视频从0s加载到10s，显示它然后将视频从10s加载到20s。

我考虑过编写这段代码（没有#t = 0,10，但在返回之前等待整个视频加载）。

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

提前致谢，
托马斯

Answer 1

我无法告诉Netflix，但对于YouTube来说，这不是他们所做的。

您看到的Immutable元素src的blob URI指向MediaSource对象，而不是Blob。

现在，MediaElement <video>中的#t片段标识符仅适用于MediaElements。
MediaElements将尝试仅从服务器加载所需的数据。这要归功于Range requests。但它要求已经提取并解析了媒体的元数据，以便浏览器可以知道要加载的下一个数据位于哪个字节范围。
src片段标识符只是告诉浏览器我们只对那里定义的范围感兴趣的一种方式，因此，此片段标识符还需要可访问媒体的元数据，并提供正确的字节偏移量

这一切都告诉您实际上需要在您设置此#t片段标识符的URI处提供完整文件。

因此，在您的情况下，您必须从原始URI加载完整文件，并且只在您将设置为#t的{{1}}的blob URI上添加片段标识符：

<video>

src

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) // fetch the whole file
  .then(resp => resp.blob())
  .then(blob => {
    const blobURI = URL.createObjectURL(blob);
    const fragId = '#t=5' // starts at 5s
    vid.src = blobURI + fragId; // here you set the fragId
  });

所以这可能不是你想要的，因为你实际上会加载完整的文件。

但我想你真正想要的是一种隐藏原始文件的方法，绝望地试图阻止用户下载它。然后，我很遗憾地告诉你，这根本不起作用，因为你的AJAX请求清晰可见请注意，即使按范围取自己并使用像YT这样的MediaSource也无法正常工作，YT视频实际上是可以下载的。

如果您真的想要这样做，那么最好的举措可能就是使用Encrypted Media Extensions API。

在特定时间加载BLOB视频

1 个答案: