Asp.Net Core下使用blob隐藏视频真实路径

作者 the7

发布于 2020年03月27日

BLOB，全称为big binary large object，二进制大对象。服务端生成二进制对象返回给前端，浏览器拿到blog对象后，通过URL.createObjectURL生成临时地址，形如 blob:https://www.xx.com/xsdf-sdf-...。我们再将其赋值给video标签的src就可以了。

服务端创建对象

HomeController中添加方法

[HttpPost]
public FileStreamResult Play()
{
    var mp4 = Path.Combine(_webHostEnvironment.WebRootPath, "SampleVideo_1280x720_2mb.mp4");
    var fs = new FileStream(mp4, FileMode.Open);
    return File(fs,"video/mp4");
}

前台页面生成blob对象

<div class="text-center">
    <video id="sound" width="720" height="480" controls="controls"></video>
</div>
<script>
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//配置请求方式、请求地址以及是否同步
xhr.open('POST', '/home/play', true);
//设置请求结果类型为blob
xhr.responseType = 'blob';
//请求成功回调函数
xhr.onload = function(e) {
    if (this.status === 200) {//请求成功
        //获取blob对象
        var blob = this.response;
        //获取blob对象地址，并把值赋给容器
        $("#sound").attr("src", URL.createObjectURL(blob));
    }
};
xhr.send();
</script>

浏览看看效果

再看看源码，已被转为blob方式了

总结

blob方式确实可以隐藏真实路径，但不代表视频就不能被下载了，只是下载要稍微麻烦些。我看有些视频网站在用 blob + m3u8 + ts 这种方式，做视频站点的可以尝试一下。