Split video in multiple parts – PHP & FFmpeg

by Posted on

To split video files in 2 parts or extracting a specific part from a long video 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 split a video and save the extracted part 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" style="margin-top: 100px;">
    <div class="row">
	<div class="offset-md-4 col-md-4">
	    <form method="POST" enctype="multipart/form-data">
	        <div class="form-group">
	            <label>Video</label>
       	            <input type="file" name="video" class="form-control">
	        </div>

               <div class="form-group">
                   <label>Cut from</label>
                   <input type="text" name="cut_from" class="form-control" placeholder="00:00:00">
               </div>

               <div class="form-group">
                   <label>Duration</label>
                   <input type="text" name="duration" class="form-control" placeholder="00:00:00">
              </div>

              <input type="submit" name="submit" class="btn btn-primary" value="Split">

	    </form>
	</div>
    </div>
</div>

Step 3 – Split video in multiple parts

The next step is to split the file based on user input. Paste the following code on top of your file including the PHP starting and closing tags:

<?php

if (isset($_POST["submit"]))
{
    $file_name = $_FILES["video"]["tmp_name"];
    $cut_from = $_POST["cut_from"];
    $duration = $_POST["duration"];

    $command = "/usr/local/bin/ffmpeg -i " . $file_name . " -vcodec copy -ss " . $cut_from . " -t " . $duration . " output.mp4";
    system($command);
}

?>

Step 4 – Preview of selected video

At this point your script is working perfectly. One more thing you can add is to display the preview of video before performing the splitting action. So that the user can know which video he is about to split. To do this first you have to create a video tag just below input type file, so the preview of video will be displayed beneath the input field.

<video width="500" height="320" id="video" controls></video>

This will set the width and height of video. Make sure to give the unique “id” attribute and also the “controls” attribute. The id attribute will help in javascript to get the video tag and display the preview of selected video and controls attribute will display the controls in html5 video player.

Now you need to attach a javascript listener that will be called when the user selects the file. Go ahead and add an attribute on input type file tag.

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.

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

<script>

    function onFileSelected(self) {
        var file = self.files[0];
        var reader = new FileReader();

        reader.onload = function (event) {
            var src = event.target.result;
            var video = document.getElementById("video");
            video.setAttribute("src", src);
        };

        reader.readAsDataURL(file);
    }

</script>

Now that you have learned how to split the video file in multiple parts. You can also learn how to merge multiple videos into one. Follow this tutorial to do that.

[wpdm_package id=’150′]

Post Views: 217

Published by adnanafzal565