html5视频标签中使用blob做视频加密的原理

今天发现慕课网中的视频播放地址使用了Blob加密。这是一种新的用法，我是第一次发现。因此便研究了一下它的用法。

采用Blob可以在一定程度上模糊住大家。例如下面的这个播放地址：

blob:http://simpl.info/884da595-7816-4211-b6c3-607c444556ef

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。Video 使用 blob 二进制流需要前后端同时支持。

Java 生成 Blob 二进制流

1. /*

2. * 在这里可以进行权限验证等操作

3. */

4.  

5. //创建文件对象

6. File f = new File("E:\\test.mp4");

7. //获取文件名称

8. String fileName = f.getName();

9. //导出文件

10. String agent = getRequest().getHeader("User-Agent").toUpperCase();

11. InputStream fis = null;

12. OutputStream os = null;

13. try {

14. fis = new BufferedInputStream(new FileInputStream(f.getPath()));

15. byte[] buffer;

16. buffer = new byte[fis.available()];

17. fis.read(buffer);

18. getResponse().reset();

19. //由于火狐和其他浏览器显示名称的方式不相同，需要进行不同的编码处理

20. if(agent.indexOf("FIREFOX") != -1){//火狐浏览器

21. getResponse().addHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("GB2312"),"ISO-8859-1"));

22. }else{//其他浏览器

23. getResponse().addHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(fileName, "UTF-8"));

24. }

25. //设置response编码

26. getResponse().setCharacterEncoding("UTF-8");

27. getResponse().addHeader("Content-Length", "" + f.length());

28. //设置输出文件类型

29. getResponse().setContentType("video/mpeg4");

30. //获取response输出流

31. os = getResponse().getOutputStream();

32. // 输出文件

33. os.write(buffer);

34. }catch(Exception e){

35. System.out.println(e.getMessage());

36. } finally{

37. //关闭流

38. try {

39. if(fis != null){

40. fis.close();

41. }

42. } catch (IOException e) {

43. System.out.println(e.getMessage());

44. } finally{

45. try {

46. if(os != null){

47. os.flush();

48. }

49. } catch (IOException e) {

50. System.out.println(e.getMessage());

51. } finally{

52. try {

53. if(os != null){

54. os.close();

55. }

56. } catch (IOException e) {

57. System.out.println(e.getMessage());

58. }

59. }

60. }

61. }

 HTML5 Video 使用 Blob

1. //创建XMLHttpRequest对象

2. var xhr = new XMLHttpRequest();

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

4. xhr.open('POST', './play', true);

5. //设置请求结果类型为blob

6. xhr.responseType = 'blob';

7. //请求成功回调函数

8. xhr.onload = function(e) {

9. if (this.status == 200) {//请求成功

10. //获取blob对象

11. var blob = this.response;

12. //获取blob对象地址，并把值赋给容器

13. $("#sound").attr("src", URL.createObjectURL(blob));

14. }

15. };

16. xhr.send();

HTML代码：

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

 

转载自业余草：https://www.xttblog.com/?p=1587