Add overlay or watermark on video – PHP & FFmpeg

by Posted on

In this article, we will be using FFmpeg tool with PHP to add watermark on a video.

Watermark on video

Watermark (also known as overlay image) is an image that displays in a specific position throughout the video. It is important to display your brand logo along with your video. Also it serves as a material that this content has been provided by your brand. If you have ever used Microsoft Word, then you would probably be aware of what watermark is. In MS Word, you can display watermark in diagonal or horizontal format. That type of watermarks are used for documents only.

In terms of video, you cannot display this on whole video. So you need an image of lower resolution then your video so it can be placed in somewhere inside the video. Also, you need to position the overlay image in a proper location. The position of image should be so that user must not get distracted from your actual video. The recommended positions are either top left, right or bottom left or right.

FFmpeg

You need to download and install FFmpeg in your system. After installation, you can also add it in your environmental PATH variable. We are going to create a PHP script that will input 2 files from user, one video where watermark should be placed and second is the overlay image which will be placed throughout the video.

Creating layout

Create a file named index.php in your htdocs or www folder if you are using XAMPP or WAMP respectively. If you already have a live site with domain and hosting, you need to connect with your server using SSH and run all the commands at the root of your project. Also mare sure you have set the folder permission to read and write, otherwise FFmpeg will not be able to create a new video with overlay image. Paste the following code in index.php file:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

<div class="container" style="margin-top: 100px;">
	<div class="row">
		<div class="offset-md-3">
			
			<!-- creating the form -->
			<!-- apply encoding type to process file -->
			<form method="POST" action="add-overlay.php" enctype="multipart/form-data">
				
				<!-- creating video input file -->
				<div class="form-group">
					<label>Select video</label>
					<input type="file" name="video" class="form-control">
				</div>

				<!-- creating image input file -->
				<div class="form-group">
					<label>Select image</label>
					<input type="file" name="image" class="form-control">
				</div>

				<!-- create submit button -->
				<input type="submit" class="btn btn-primary" value="Add overlay">

			</form>

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

Add overlay image to video

Now we need to process the form i.e. to add selected image as overlay to selected video file and save the output as new file with same video and audio quality. The process involves 2 steps, first, as the selected image could be a very high quality image with very high resolution. So we need to resize the image to resolution without decreasing the quality. Secondly we will apply that resized image as overlay to video. Create a new file named “add-overlay.php” or same as action attribute in <form> tag. Paste the following code in newly created add-overlay.php file:

<?php

// first you have to get both input files in separate variables
$video = $_FILES["video"]["name"];
$image = $_FILES["image"]["name"];

// then you have to resize the selected image to lower resolution
$command = "/usr/local/bin/ffmpeg -i " . $image . " -s 128x128 output.jpeg";

// execute that command
system($command);

echo "Overlay has been resized";

// both input files has been selected
$command = "/usr/local/bin/ffmpeg -i " . $video . " -i output.jpeg";

// now apply the filter to select both files
// it must enclose in double quotes
// [0:v] means first input which is video
// [1:v] means second input which is resized image
$command .= " -filter_complex \"[0:v][1:v]";

// now we need to tell the position of overlay in video
$command .= " overlay=80:50\""; // closing double quotes

// save in a separate output file
$command .= " -c:a copy output.mp4";

// execute the command
system($command);

echo "Overlay has been added";

?>

Explore what more you can do with FFmpeg.

Published by adnanafzal565

17 Replies to “Add overlay or watermark on video – PHP & FFmpeg”

  2. getting this msg Overlay has been resizedOverlay has been added
    but not able to see watermark video pls help.

    1. If you are using windows then you have to write the FFmpeg path in your environment variable. If Linux or Mac, then the path will be: “/usr/local/bin/ffmpeg”

  4. i have problem in ffmpeg as i have cakephp framework and when i login to vps as root and on root terminal when i call which ffmpeg it show usr/bin/ffmpeg and usr/local/bin/ffmpef but when i call my php script having ffmpeg command it says ffmpeg command not found then i try to install repo of PHP-ffmpeg via composer but then my error says unable to load ffprobe. please help me i already try different different method available on net from last 4 days nothing works
    please

  5. Hey Dear Adnan Bro, I’m a Windows 10 User please make a guide for windows users too to add animated or simple logo (including set custom position)

  6. Hi Adnan! Im trying to create a web frontend, for some encoding options using ffmpeg, on windows 10, so all this code is very usefull to learn! I managed to do what I need with batch files, but the interaction allowed is very limited… I really apreciatte your tutorial! Im having problems trying to download the code, a red box saying: Sorry file not found… any way you can help me? Thanks !! Mariano.

Comments are closed.