小编Upa*_*ram的帖子

我已经看过这个问题了-

串联两个或多个WebM视频Blob的部分

并在此处尝试了示例代码-https : //developer.mozilla.org/en-US/docs/Web/API/MediaSource-（无修改），希望将blob转换为arraybuffers并将它们附加到MediaSource WebAPI，但即使示例代码也无法在我认为兼容的Chrome浏览器上运行。

我的问题的症结在于，第一次播放后，我无法将多个Blob Webm剪辑合并成一个没有正确播放的剪辑。要直接解决该问题，请滚动至前两个代码块之后的行，以使背景继续阅读。

我正在设计一个Web应用程序，允许演示者记录他/她自己的场景并解释图表和视频。

我正在使用MediaRecorder WebAPI在chrome / firefox上录制视频。（旁边的问题-除通过Flash之外，我还可以通过网络摄像头和麦克风录制视频/音频吗？因为非Chrome / Firefox用户代理不支持MediaRecorder）。

navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMedia)
    .catch(e => { console.error('getUserMedia() failed: ' + e); });

function gotMedia(stream) {
    recording = true;
    theStream = stream;
    vid.src = URL.createObjectURL(theStream);
    try {
        recorder = new MediaRecorder(stream);
    } catch (e) {
        console.error('Exception while creating MediaRecorder: ' + e);
        return;
    }

    theRecorder = recorder;
    recorder.ondataavailable = 
        (event) => {
            tempScene.push(event.data);
        };

    theRecorder.start(100);
}

function finishRecording() {
    recording = false;
    theRecorder.stop();
    theStream.getTracks().forEach(track => { …

我将固定位置模态放置在相对定位的元素内，没有转换且带有溢出：自动。

问题是，当父级溢出时，模式的背景不会覆盖滚动条 - 请查看所附图片的示例。

滚动条也应该被半透明的黑色背景覆盖，但由于某种原因它没有被覆盖。有谁知道为什么，和/或我如何解决这个问题？

我想避免对模式容器使用绝对定位，因为它可以是任何任意层次结构中的嵌套元素。

这是我的 .modal-container 类的 css，其中包括背景。

.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 1;
transition: all .1s;
display: flex;
z-index: 200;
justify-content: center;
align-items: center;}