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.
