Merge multiple videos in one file – PHP & FFmpeg

by Posted on

Merge or combining multiple short videos in one long file is usually done by some of the softwares available on the internet. Some operating systems provides basic editing softwares for free, for example Windows 10 has built-in video editor in their Windows Media Player. Macintosh has QuickTime player and iMovie which came along with operating system for free. If you do not have such editor you can always download from the internet and sometimes you have to pay some amount because some of them are not free. In this tutorial, we will be creating a simple PHP script that will help you to combine multiple video and save them in one file as a separate video.

Step 1 – Download FFmpeg

First you need to download and install FFmpeg encoder which you can download from here: Download FFmpeg. This encoder is used to edit video and audio files, you can edit MP4/FLV/MKV/3GP or MOV files. You can edit all types of audio files from this too including MP3, WAV or OGG. FFmpeg is basically a command line tool so after installation try to run the command in your terminal or command prompt:

> ffmpeg

This will make sure FFmpeg has been installed perfectly in your system. Now you can use it’s commands, you can find all documentation in it’s official website.

Step 2 – Creating layout

The design is quite simple, we will be using bootstrap darkly for designing the webpage. Bootstrap darkly will be included in the source files.

<link rel="stylesheet" href="bootstrap-darkly.min.css">

<div class="container">
    <div class="row">
        <div class="offset-md-4 col-md-4">
            <form method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label>Select videos
                    <input type="file" name="videos[]" class="form-control" required multiple>
                </div>

                <input type="submit" name="submit" class="btn btn-primary" value="Merge">
            </form>
        </div>
    </div>
</div>

Step 3 – Merge multiple videos

The next step is to merge multiple videos selected by user. Paste the following code on top of your file including the PHP starting and closing tags:

<?php

if (isset($_POST["submit"]))
{
    $content = "";
    for ($a = 0; $a < count($_FILES["videos"]["name"]); $a++)
    {
        $content .= "file " . $_FILES["videos"]["name"][$a] . "\n";
    }
    file_put_contents("mylist.txt", $content);

    $command = "/usr/local/bin/ffmpeg -f concat -i mylist.txt -c copy output.mp4";
    system($command);
}

?>

Step 4 – Preview of selected videos

At this point, you will be able to select multiple videos and see all of them combined into one named “output.mp4” when the form submits. However, you can do ONE MORE THING….. You can display a preview of each video before submitting the form. To do this, first you have to add an “onchange” listener on input type file, which will be a javascript function that will be called when the user select the videos.

<input type="file" name="videos[]" class="form-control" required multiple onchange="onFileSelected(this);">

This will call the javascript function called “onFileSelected” and send the input type file as a parameter. Now we are going to create a function.

<div id="videos"></div>

Create this div tag where you want to show the preview of videos (may be just below input type file). Make sure to give it a unique ID.

At the bottom of file paste the following code along with script tag at the start and end:

<script>

function onFileSelected(self) {
    var videos = document.getElementById("videos");

    for (var a = 0; a < self.files.length; a++) {
        var file = self.files[a];
        var fileReader = new FileReader();

        fileReader.onload = function (event) {
            var src = event.target.result;
            var newVideo = document.createElement("video");

            newVideo.setAttribute("src", src);
            newVideo.setAttribute("controls", "controls");
            newVideo.setAttribute("width", 500);

            videos.appendChild(newVideo);
        };

        fileReader.readAsDataURL(file);
    }
}

</script>

That’s it, now you can view the preview of all videos before combining them into one. If you wanted to have the source code of this script, you can get it from the button below. Make sure you download it and let us know if you face any issue.

Since you have learned now how to merge multiple videos into one. You can also check our tutorial to split single video file into multiple parts.

[wpdm_package id=’152′]

Post Views: 149

Published by adnanafzal565