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

Question

I had done video recording using html.I had recorded and play a video in the same tag itself using autoplay with HTML and JavaScript .I want to play that video in separate tag below recording.please can anyone help me.Thanks in Advance:)

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); }; 

put all your code in the sandbox