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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.