使用HTML5中的Blob对象实现媒体播放功能

前言

图片、音频、视频等资源文件，我在之前的项目中都是采用，直接放到webContent路径下，然后在页面直接访问。这样就会存在一个安全性问题，就是无论什么用户或者游客，只要知道文件的URL就可以通过在浏览器地址栏输入URL直接获取到。 

最近在浏览网站的时候，无意间接触到了Blob对象，经过研究终于可以实现从服务器其他路径（不在webContent路径下）获取文件，并进行显示或播放的功能了。其原理是，首先通过ajax请求，获取blob对象，在这个过程中就可以进行访问限制（例如，访问时检测用户是否登录等）。然后通过js获取blob对象的路径，然后赋给标签。

前端代码

Javascript代码：

//创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

//配置请求方式、请求地址以及是否同步

xhr.open('POST', './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();

HTML代码：

<video id="sound" width="200" controls="controls"></video>

完整内容详见“阅读原文”