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

将所有代码放入沙箱

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

1 个答案: