前端 mediaRecorder 录制视频源代码实例，和本地播放器无法定位进度条问题分析和解决

问题

mediaRecorder 本质上录制的是webm
当我们使用getUserMedia、MediaRecorder等API生成的webm视频时，会发现最终的webm是无法拖动进度条的

解决方案
一、计算视频长度，分配给blob
这种方法的核心就是，在start开始录制时，记录一个开始时间，然后在stop停止录制后，把当前时间与记录的开始时间相减，在把时间赋值给blob来解决这个问题。源代码

主要代码

 MediaUtils.getUserMedia(true, true, function (err, stream) {
        if (err) {
            throw err;
            alert("请检查摄像头!", function () { });
        } else {
            // 通过 MediaRecorder 记录获取到的媒体流
            var options = {
                audioBitsPerSecond: 128000,
                videoBitsPerSecond: 2500000,
                mimeType: "video/webm;codecs=vp8,opus"//webm类型一定要加codecs=vp8,opus，否则会导致录制时候时而可以用时而不能用
            }
            mediaRecorder = new MediaRecorder(stream, options);
            mediaStream = stream;
            var chunks = [];//通道
            video.srcObject = stream;
            video.play();
            videosContainer.appendChild(video);
            mediaRecorder.ondataavailable = function (e) {
                mediaRecorder.blobs.push(e.data);
                chunks.push(e.data);
            };
            mediaRecorder.blobs = [];
            mediaRecorder.onstop = function (e) {
            var duration = new Date().getTime() - startTime;//停止录制时候 用当前时间减去开始录制的时间
                console.log(new Date().getTime())
                console.log(duration)
                var tmpBlob = new Blob(chunks, { 'type': mediaRecorder.mimeType });
                //调用设置时长代码。该函数基于fix-webm-duration.js
                ysFixWebmDuration(tmpBlob, duration, function (fixedBlob) {
                    recorderFile = fixedBlob
                   console.log(recorderFile)
                });
                chunks.length = 0;
                if (null != stopRecordCallback) {
                    stopRecordCallback();
                }
                $('#openCamera').text('保存');
            };
            $('#openCamera').text('开始录制');
        }
    });

改善后的问题

原有问题：进度条不显示，无法定位进度条，没有总时长，但windows自带的本地播放器可完整播放
改进后：下载的视频通过右键打开方式选择谷歌浏览器，或者windows商店下载的 视频播放器HD或vLc 都可完整播放，可定位进度条，有总时长，可定位进度条。但出现自带的浏览器视频播放不完整
原因：mediaRecorder 录制视频 内置是webm格式，本地播放器对webm不适配
两种方案可选：
1，坚持原有的，视频正常播放，（不管什么播放器进度条都显示不了，无法定位进度条，没有总时长显示，）
2，改进后的，指导用户用谷歌浏览器播放或者到windows商店下载视频播放器HD或vLc 播放，但是存在自带播放器会出现播放不完整的问题

最后提示一个需要注意的问题