最近做了一个项目关于:用H5做pc端录视频和拍照并能预览照片和视频。遇到的一个问题和解决办法这边记录一下,有需要的可以看下:
录视频后得预览一下,网上找了很多例子,比如用video或者video的source进行兼容什么的,还有将file文件进行转码
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
window.URL.createObjectURL(mediaStream) 出现 typeError 错误;原来浏览器已经取消对 mediaStream 类型的支持。有一个解决办法是:
video.srcObject = mediaStream;但是这个解决不了我的问题,还是显示不出来。
我这边有个比较简单的办法:
<video width="225" height="160" poster="" id="video" controls></video>
poster是作为带有预览图的视频
var file = new File([recorder], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
type: 'video/mp4'
}); // 将blob转成file文件
var reader = new FileReader();
reader.readAsDataURL(file); // 开始读取文件
var fileType = file.type.split('/')[0];
var video = document.getElementById("video");
reader.onload = function(e) { // 读取结束并且读取成功触发 在这里可以拿到result
if (fileType === 'video') {
video.src = this.result;
video.style.display = 'block' // 显示视频
} else if (fileType === 'image') {
img.src = this.result;
img.style.display = 'block' // 显示图片
}
};
注:recorder是我的视频的blob文件变量
以上就是我的走坑记录。