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