How to merge two videos into one using Javascript and html and also provide a download link for that video?
Question
I am trying to merge Two videos taken as input by the user and then display it and also provide a download link for the final video. My code doesn't merge the two videos but plays them one after the other. So how can I merge them together and provide a download link? The following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Video Editor</title>
</head>
<body>
<h1 align="center">Video editor</h1>
<h3> Merging Videos</h3>
<video width="400" controls id="video">
<source src="" id="video_here" class="active">
Your browser does not support HTML5 video.
<source src="" id="newvideo_here" class="">
</video>
<br><br>
<input type="file" name="file[]" class="file_multi_video" id= "myvid" accept="video/*">
<br><br>
<input type="file" name="file[]new" class="new_file_multi_video" id= "newmyvid" accept="video/*">
<br>
<br>
<br>
<h3> Video Spliting</h3>
<button><a href="web/index.html" target="_blank">video spliting</a></button>
<h3> add audio to video</h3>
<script type="text/javascript" src="assets/js/videoEditor.js"></script>
</body>
</html>
javascript code:-
var myvid = document.getElementById('myvid');
var video = document.getElementById('video');
myvid.addEventListener("change",function(){
var source = document.getElementById('video_here');
console.log(source);
source.src = URL.createObjectURL(this.files[0]);
video.load();
video.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#video source.active");
var nextsource = document.querySelector("#video source.active + source") || document.querySelector("#myvideo source:first-child");
console.log("nextsource"+ nextsource);
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
video.src = nextsource.src;
video.play();
});
});
var myvid = document.getElementById('newmyvid');
//var video = document.getElementById('video');
myvid.addEventListener("change",function(){
var source = document.getElementById('newvideo_here');
console.log(source);
source.src = URL.createObjectURL(this.files[0]);
console.log(source.src)
//video.load();
});
1 answers
solution1
2 2020-10-21 05:25:43
I think you should mix the videos yourself using a technique like the one in this link: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation . It manipulates each pixel of each frame making it gray. Perhaps you could play the two videos simultaneously and mix the pixels together.
I don't know how to download the final generated video.
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.