Как объединить два видео в одно с помощью Javascript и html, а также предоставить ссылку для скачивания этого видео?

Я пытаюсь объединить два видео, введенных пользователем, а затем отобразить их, а также предоставить ссылку для загрузки окончательного видео. Мой код не объединяет два видео, а воспроизводит их одно за другим. Итак, как я могу объединить их вместе и предоставить ссылку для скачивания? Ниже приведен мой HTML-код.

<!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: -

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

введите здесь описание изображения


javascript html video-editing web-technologies
person Alisha Maini    schedule 27.07.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, вам следует микшировать видео самостоятельно, используя технику, подобную той, что описана по этой ссылке: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation. Он манипулирует каждым пикселем каждого кадра, делая его серым. Возможно, вы могли бы воспроизводить два видео одновременно и смешивать пиксели вместе.

Я не знаю, как загрузить окончательно сгенерированное видео.

person Alvaro Maceda    schedule 21.10.2020