如何使用 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