Add thumbnail to video – PHP & FFmpeg

by Posted on

Thumbnail is basically a preview of video. Every operating system by default add a thumbnail to a video by itself. When you open YouTube, every video you must have see an image along with it’s title. It gives the preview of video and tells what the video is about. Most people use custom images as thumbnail and most are automatically generated by YouTube.

Default video thumbnail

When it comes to operating system, you have a lot of video files in your hard drive and you can see little images that gives the insight of each video. Thumbnail of those videos are automatically generated by operating system itself. The thumbnail assign by OS comes from one of the frames inside the video. Which means the image you see on video thumbnail must have appeared somewhere in the video. “You can change it”

In order to change that thumbnail, you must have FFmpeg installed in your system. You can download it from it’s official site. We are creating a form that will allow you to select video whose thumbnail needs to be changed and image which will be used as new thumbnail.

Creating layout

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

<div class="container" style="margin-top: 100px;">
	<div class="col-md-6 offset-md-4">
		<form method="POST" enctype="multipart/form-data" action="add-thumbnail.php">

			<div class="form-group">
				<label>Select video</label>
				<input type="file" name="video" accept="video/*" required class="form-control">
			</div>

			<div class="form-group">
				<label>Select image</label>
				<input type="file" name="image" accept="image/*" required class="form-control">
			</div>

			<input type="submit" class="btn btn-primary" value="Add thumbnail">

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

Processing the form

At this point if you run the script, you will see a form with 2 input fields and a submit button. One input field is for selecting video and second is for selecting image. Now you need to create a new file named “add-thumbnail.php” and paste the following code in it:

<?php

$video = $_FILES["video"]["tmp_name"];
$image = $_FILES["image"]["tmp_name"];

$command = "/usr/local/bin/ffmpeg -i $video -i $image -map 0 -map 1 -c copy -c:v:1 png -disposition:v:1 attached_pic output.mp4";
system($command);

echo "Thumbnail has been added";
?>

Now you can run the script and you will see a form with 2 input fields, one for video and one for image. Select the video of your choice and select image from other field. When you hit the submit button, you will see a new file will be created at the root of your project’s folder named “output.mp4”. The newly created video file will have the thumbnail of your selected image file. All other attributes of video (bitrate, resolution, buffer size etc) will remain same.

I have also attached all the source files below, make sure you download them and let us know if you face any issue.

Select thumbnail from video

We created a detailed post on how you can generate thumbnails from a video. After you have generated all the thumbnails, you can add the thumbnail as per your choice.

[wpdm_package id=’158′]

Published by adnanafzal565