如何使用HTML和JavaScript播放录制的视频

Question

我使用html进行视频录制。我已经使用HTML和JavaScript自动播放功能在同一标签中录制和播放了视频。我想在录制下方的单独标签中播放该视频。任何人都可以帮助我。谢谢您：)

main.js：

    mediaRecorder.onstop = function(){
        log('Stopped  & state = ' + mediaRecorder.state);

        var blob = new Blob(chunks, {type: "video/mp4"});
        chunks = [];

        var videoURL = window.URL.createObjectURL(blob);

        downloadLink.href = videoURL;
        videoElement.src = videoURL;
        downloadLink.innerHTML = 'Download video file';

        var rand =  Math.floor((Math.random() * 10000000));
        var name  = "video_"+rand+".webm" ;

        downloadLink.setAttribute( "download", name);
        downloadLink.setAttribute( "name", name);
    };
function onBtnStopClicked(){
    mediaRecorder.stop();
    videoElement.controls = true;

}

HTML：

<video controls autoplay></video><br>
    <button id="rec" onclick="onBtnRecordClicked()">Record</button>
    <button id="pauseRes"   onclick="onPauseResumeClicked()" disabled>Pause</button>
    <button id="stop"  onclick="onBtnStopClicked()" disabled>Stop</button>

Answer 1

 let onBtnStopClicked = function (e) { mediaRecorder.stop(); }; mediaRecorder.onstop = function () { // log('Stopped & state = ' + mediaRecorder.state); let blob = new Blob(chunks, {type: "video/mp4"}); let chunks = []; let videoURL = window.URL.createObjectURL(blob); let rand = Math.floor((Math.random() * 10000000)); let name = "video_" + rand + ".webm" ; let videoElement = document.createElement("video"); videoElement.controls = true; videoElement.src = videoURL; let downloadLink = document.createElement("button"); downloadLink.href = videoURL; downloadLink.innerHTML = "Download video file"; downloadLink.setAttribute("download", name); downloadLink.setAttribute("name", name); document.body.appendChild(videoElement); document.body.appendChild(downloadLink); }; 

将所有代码放入沙箱