H5多媒体应用

随着多元化业务的发展，前端H5越来越需要对图像、音频、视频等多媒体做出：文件选择、压缩、实时数据操作等处理。文本为大家探讨一下前端H5对于图像、音频、视频的应用与对浏览器的兼容性。

一.图像

(1). 图像文件选择：拍照、相册、本地文件

对于图像文件的选择目前有一个比较好的解决方案就是直接用标签：，可以在手机上出现弹出拍照、相册、本地文件等系统自带的选择，pc上也可以直接选择本地文件。

在手机上选择图片

(2). 图像文件的压缩

图像文件的压缩常用的方法是canvas
可以先用canvas context自带的scale方法先做按比例压缩
再用canvas自带的toDataURL方法做质量压缩

二.音频

对于音频前端其实并没有一个像图片那样有非常好兼容性的解决方案，下面为大家罗列一下各种方案:

(1). flash方案

好处是可以自定义界面操作，录音，实时处理音频数据，压缩，播放都是没有问题的，缺点是浏览器需要先装好flash插件，而且目前iphone手机自带的Safari浏览器默认是没有flash插件的。所以对于没有flash插件需要做引导与提示。

(2). H5标签方案

用H5标签选择音频文件，在iphone手机上没有弹出录音选择也没有在选择文件中过滤音频文件，所以H5标签选择音频文件不是一个好的解决方案

在手机上选择音频

播放音频方面可以用 audio标签

用controls="controls"可以自定义播放栏

(3). navigator.getUserMedia方案

navigator.getUserMedia可以实现录音，实时处理音频数据，但是Safari等许多浏览器不兼容，所以也不是一个好的解决方案

(4). 小程序方案

小程序可以实现录音、实时处理音频数据
recorderManager.onFrameRecorded((res) => {
const { frameBuffer } = res
console.log('frameBuffer.byteLength', frameBuffer.byteLength)
})
但是只能在微信小程序上用，其它浏览器用不了

(5). js音频压缩方案

js音频建议录音的时候生成wav，因为wav音频数据比较简单，mp3的话还有额外解码。具体的做法是读取音频文件Blob数据，再处理里面的双声道变单声道，采样率16位变8位等
这里找了一篇具体的教程，大家可以参考一下：

HTML5网页录音和压缩(附源码)
http://www.cnblogs.com/blqw/p/3782420.html

另外还有一种第三方库的转换方案Ffmpeg.js这个文件太大gzip后还有6M，不太建议用这个

三.视频

(1). flash方案

跟音频一样视频都能做录制、实时处理数据、播放，但需要flash插件

(2). H5标签方案

用H5标签选择视频文件，在iphone手机上弹出录视频也在选择文件中过滤视频文件，所以H5标签选择视频文件是一个好的解决方案

在手机上选择视频

播放视频方面可以用 video标签

用controls="controls"可以自定义播放栏

(3). navigator.getUserMedia方案

navigator.getUserMedia可以实现录制，实时处理视频数据，但是Safari等许多浏览器不兼容，所以不是一个好的解决方案

(4). 小程序方案

微信小程序对于视频还没做实时数据处理，可能以后会有，而且小程序现在可以嵌入网页了，所以相比之下没有直接用H5标签选择视频文件方案好

(5). js视频压缩方案

通过canvas + video标签结合处理
获取video的原图帧，通过canavs绘制到页面
每一帧的处理跟图片一样先用canvas context自带的scale方法先做按比例压缩，再用canvas自带的toDataURL方法做质量压缩
压缩过程中会播放一次，如果不想用户看到可以用控制透明度opacity，加进度条或loading

另外Ffmpeg.js转换方案文件太大，也是不太建议使用的

总结：

图像建议用标签canvas压缩

音频建议用flash方案或微信小程序方案，可以做实时数据处理，播放用

视频建议直接用标签录制选择,播放用

您的意见是我改善的东西，欢迎评论提建议，如果对您有帮助，请点个赞，谢谢~~菲麦前端专题，汇聚前端好文，邀您关注！