如何使用 Javascript 和 html 将两个视频合并为一个，并提供该视频的下载链接？

Question

我正在尝试合并用户输入的两个视频，然后显示它，并为最终视频提供下载链接。 我的代码没有合并这两个视频，而是一个接一个地播放。 那么如何将它们合并在一起并提供下载链接呢？ 以下是我的 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();
});

Answer 1

我认为您应该使用类似于此链接中的技术自己混合视频： https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation 。 它操纵每帧的每个像素，使其变为灰色。 也许您可以同时播放两个视频并将像素混合在一起。

我不知道如何下载最终生成的视频。

如何使用 Javascript 和 html 将两个视频合并为一个，并提供该视频的下载链接？

问题描述

1 个解决方案

解决方案1
2 2020-10-21 05:25:43

如何使用 Javascript 和 html 将两个视频合并为一个，并提供该视频的下载链接？

问题描述

1 个解决方案

解决方案1 2 2020-10-21 05:25:43

解决方案1
2 2020-10-21 05:25:43