How to merge two videos into one using Javascript and html and also provide a download link for that video?

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

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

Share Improve this question edited Sep 27, 2023 at 13:31 TylerH 21.1k79 gold badges79 silver badges114 bronze badges asked Jul 27, 2020 at 6:57 Alisha Maini 971 gold badge3 silver badges12 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

I think you should mix the videos yourself using a technique like the one in this link: https://developer.mozilla/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.

Programmer puzzle solving

How to merge two videos into one using Javascript and html and also provide a download link for that video? - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)