html编辑器如何实现html5视频上传功能

新建一个带vedio标签的页面，被给vedio的source加上视频连接；

在浏览器中打开，发现一片漆黑，因为视频没有被打开，要给video加上autoplay的属性，如果不需要声音，就加上muted，还可以加上循环播放的loop；

video并没有完全撑满浏览器，在body下加上margin:0，接下来给video加上样式，使之没有scroll，又能撑满全屏，打来浏览器就能看到恰到好处的背景视频了；

在页面中加上文字，会发现该文字并没有显示在页面上，需要调低video的z-index值，这里直接置为-9999。

还可以用-filter属性，来控制video的色调，比如加上-webkit-filter:grayscale(100%)，这样页面中的视频就会显示为灰色调，此属性也使用于图片；

还可以利用video的playbackRate属性来控制video的播放速度，如果要让背景视频以慢速播放的话可以加上下面的javascript

<script>

var video= document.getElementById('v1')

video.playbackRate = 0.5

</script>

一、input

传统上传音视频文件的方法

优点：兼容性较好，几乎所有浏览器，所有机型都支持。

缺点：视频文件过大，无法压缩。视频录制完成后，一次性传输，不能实时传输。上传视频的瓶颈在于前端到node层传输较慢。

考虑，寻找前端压缩方法。

二、getUserMedia

兼容性很差，iPhone微信不支持，仅仅Safari支持。Android微信支持性还可以。webrtc的视频清晰度不佳，有可能影响算法准确率。

三、小程序

小程序中使用自研的人脸识别技术，审核不通过（腾讯就是这么*）

四、微信JSSDK

不支持视频API（只有音频和图片）

考虑，音视频分离，算了不考虑~~~

目前已使用的几种场景

1、iPhone微信录制视频，可自动压缩，上传效果还可以接受，可继续使用input，

2、Android微信可以考虑getUserMedia实现，

3、APP内嵌的H5页面使用APP集成的SDK（前提是自己公司的APP，对接方的怕是不会给提供）

4、支付宝环境，目前没有想到好的办法。

LC总监给提供的几个思路，待调研

flash

rtmp

cdn

第三方如声网

---