视频预览遇到的坑_video 播放arraybuffer

总结下视频预览遇到的坑：
1、视频预览–后台返回base64或二进制流arraybuffer格式（我们一般直接返回url使用即可，处于安全考虑，现在需求就是这样）
问题一：
base64方式：videosrc = 'data:' + content-Type + ';base64,' + base64Code(base64Code是指返回的base64)。这个拼接可前端可后端，建议后端做，因为可能存在换行问题，需要将base64Code.repalce("\r\n","")。如果是前端：base64Code.replace(/[\r\n]/g,"")。一般来说，小文件用base64，比如一些图标。
其次入错存在unsafe安全策略：需要做如下修改
1、angular中引入private santizer: DomSantizer.也可不用引入用$申明全局。
2、使用方式以视频为例子：

<video controls>
	<source [src]="this.santizer.bypassSecurityTrustResourceUrl(videosrc)"
</video>
# 讲到这里该santizer，你可研究下，里面下载不可信也是里面设置。
1
2
3
4

如果是安全策略问题，请查看官网
这里举个web.xml的例子（也可以写在meta中）：里面的还设置更多，实际参考官网。

    <init-param>
      <param-name>Content-Security-Policy</param-name>
      <param-value> default-src 'self';script-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src *; media-src 'self' data: blob:; </param-value>
    </init-param>
1
2
3
4

接着上面的：
blob方式：返回arraybuffer方式，需要指定格式将这个流转为blob。其次response其纯二进制流格式，如果不是请解析。这里涉及一个坑，angular也好、vue也好默认都是json解析。框架里面还有个bug。这个json格式无法改变。如果需要请自己写ajax做解析或者原生的XMLRequset解析。
如果使用ajax，引入jquery：

declare var $: any

# 你就可以使用
$.ajax
# 你就可以使用他来获取值
const text = $('#textId').val();
1
2
3
4
5
6

使用：

let vodieblob = new Blob([response],{type: contentType});
this.videosrc = URL.createObjectURL(vodieblob);
1
2

<video controls>
	<source src="{{videosrc}}"
</video>
1
2
3