Creating video slideshows is a popular and engaging way to showcase collections of images. Manually editing can be time-consuming and complex, especially when adding advanced features like animations and transitions. However, using the Shotstack API and PHP SDK can simplify the process.
Shotstack is a cloud-based video editing platform with an easy-to-use API. It allows you to add animations, transitions, effects, and music. The PHP Video Editor SDK integrates Shotstack's features into your PHP application, providing the features needed to automatically generate videos. Shotstack provides the infrastructure to render videos in the cloud, so you don't have to worry about the technical details.
In this article, you will learn to turn images into a slideshow video with background music using PHP.
At the end of this tutorial, you will be able to generate the following slideshow video using PHP:
Let's dive in!
Shotstack provides a cloud-based video editing API. Working with media applications is not easy. Editing and producing videos at scale can take hours, and rendering them requires significant resources. But with the help of Shotstack's rendering infrastructure, media applications can be built and scaled smoothly.
You can sign up for a free developer account to get your Shotstack API key.
PHP 7.3+ and the SDK composer package are the prerequisites for this tutorial. You can install the composer package using the following command:
composer require shotstack/shotstack-sdk-php
To begin, in your preferred text editor or IDE, create a PHP script file, let's call it slideshow.php.
Let's import the needed classes for our project from the Shotstack SDK that will be used for editing and rendering our video. You can check the README for documentation for each of the classes used in the code.
<?php
require 'vendor/autoload.php';
use Shotstack\Client\Api\EditApi;
use Shotstack\Client\ApiException;
use Shotstack\Client\Configuration;
use Shotstack\Client\Model\Edit;
use Shotstack\Client\Model\Output;
use Shotstack\Client\Model\Timeline;
use Shotstack\Client\Model\Track;
use Shotstack\Client\Model\Clip;
use Shotstack\Client\Model\ImageAsset;
use Shotstack\Client\Model\Soundtrack;
?>
Then add the following code, configuring the API client with the API URL and key provided to you.
$config = Configuration::getDefaultConfiguration()
->setHost('https://api.shotstack.io/stage')
->setApiKey('x-api-key', 'your_key_here'); // use the API key issued to you
$client = new EditApi(null, $config);
Replace your_key_here
with the sandbox API key provided, which is free for testing and development.
Now that we have a slideshow, we need to define an array of static images. The images must be hosted online and reachable via a recognized or public URL. These stock photos of real estate from Pexels, stored in our S3 bucket, will be used. Of course, you can replace it with your own image URLs and you can add more than five. The images must be publicly available.
$images = array(
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg",
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate2.jpg",
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate3.jpg",
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate4.jpg",
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate5.jpg"
);
We now want to create our video by looping through the collection of photos. First, we'll create clips by iterating over the images
array and specifying the start time, length, and motion effect.
Then, to create the clip playback properties and add them to our clips
array, we use the Clip
model and the ImageAsset
model, respectively:
$clips = [];
$start = 0.0;
$length = 3.0;
foreach ($images as $image) {
$imageAsset = new ImageAsset();
$imageAsset->setSrc($image);
$clip = new Clip();
$clip->setAsset($imageAsset)
->setLength($length)
->setStart($start)
->setEffect('zoomIn');
$start = $start + $length;
$clips[] = $clip;
}
For the first image, the start
is set by default to 0, so the video immediately begins to play. After that, each image will be visible in the video for 3 seconds.
In addition, you can use motion effects to improve your video slideshow; for instance, in our slideshow, all images have a motion effect due to the zoomIn
effect. Some of the effects are mentioned below:
zoomIn
- slow zoom inzoomOut
- slow zoom outslideLeft
- slow slide (pan) leftslideRight
- slow slide (pan) rightslideUp
- slow slide (pan) upslideDown
- slow slide (pan) downTo create faster or slower motion, you can also use slow and fast variants, such as zoomInSlow
or slideUpFast
.
The Shotstack API adheres to many desktop editing software principles, such as using a timeline, tracks, and clips. For example, a timeline acts as a container for multiple tracks, each of which contains multiple clips that play over time. Thus, let's create a track and add our array of clips.
$track = new Track();
$track
->setClips([$clips]);
We need to add a soundtrack to our video to make it more engaging. An audio file URL and a fadeInFadeOut
volume effect are set using the SDK's Soundtrack
model. An mp3 file's URL can be added, just like with images. For instance, one from the stock photo collection on Pixabay will be used.
$soundtrack = new Soundtrack();
$soundtrack
->setSrc('https://cdn.pixabay.com/audio/2022/03/23/audio_07b2a04be3.mp3')
->setEffect(fadeInFadeOut)
->setVolume(1);
The next editing stage is adding the track to the timeline. Several track arrays, the soundtrack, and a setting for the background color of the video are all contained in the timeline:
$timeline = new Timeline();
$timeline
->setSoundtrack($soundtrack)
->setBackground('#000000')
->setTracks($track)
Finally, we need to add the timeline and output to the [edit] (https://shotstack.io/docs/api/#tocs_edit) and configure the [output] (https://shotstack.io/docs/api/#tocs_output) format. Similarly, our models Output
and Edit
are defined below:
$output = new Output();
$output
->setFormat('mp4')
->setResolution('sd');
$edit = new Edit();
$edit
->setTimeline($timeline)
->setOutput($output);
Lastly, the Shotstack API is then used to process and render the edit. The Shotstack SDK handles the conversion of objects to JSON, POSTing everything to the API, and adding the API key to the request header.
try {
$response = $client->postRender($edit)->getResponse();
} catch (ApiException $e) {
die('Request failed: ' . $e->getMessage() . $e->getResponseBody());
}
echo $response->getMessage() . "\n";
echo ">> render id: " . $response->getId() . "\n";
The final code is shown below:
<?php
require 'vendor/autoload.php';
use Shotstack\Client\Api\EditApi;
use Shotstack\Client\ApiException;
use Shotstack\Client\Configuration;
use Shotstack\Client\Model\Edit;
use Shotstack\Client\Model\Output;
use Shotstack\Client\Model\Timeline;
use Shotstack\Client\Model\Track;
use Shotstack\Client\Model\Clip;
use Shotstack\Client\Model\ImageAsset;
use Shotstack\Client\Model\Soundtrack;
$config = Configuration::getDefaultConfiguration()
->setHost('https://api.shotstack.io/stage')
->setApiKey('x-api-key', 'your_api_key'); // use the API key issued to you
$client = new EditApi(null, $config);
$images = array(
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate1.jpg",
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate2.jpg",
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate3.jpg",
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate4.jpg",
"https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/images/realestate5.jpg"
);
$clips = [];
$start = 0.0;
$length = 3.0;
foreach ($images as $image) {
$imageAsset = new ImageAsset();
$imageAsset->setSrc($image);
$clip = new Clip();
$clip->setAsset($imageAsset)
->setLength($length)
->setStart($start)
->setEffect('zoomIn');
$start = $start + $length;
$clips[] = $clip;
}
$track = new Track();
$track
->setClips($clips);
$soundtrack = new Soundtrack();
$soundtrack
->setSrc('https://cdn.pixabay.com/audio/2022/03/23/audio_07b2a04be3.mp3')
->setEffect("fadeInFadeOut")
->setVolume(1);
$timeline = new Timeline();
$timeline
->setSoundtrack($soundtrack)
->setBackground('#000000')
->setTracks([$track]);
$output = new Output();
$output
->setFormat('mp4')
->setResolution('sd');
$edit = new Edit();
$edit
->setTimeline($timeline)
->setOutput($output);
try {
$response = $client->postRender($edit)->getResponse();
} catch (ApiException $e) {
die('Request failed: ' . $e->getMessage() . $e->getResponseBody());
}
echo $response->getMessage() . "\n";
echo ">> render id: " . $response->getId() . "\n";
Use the php command to run the script.
php slideshow.php
If the render request is successful, the API will return the render id, which can be used to get the render status.
To check the status we need another script which will call the API render status endpoint. Create a file called status.php and use the following code:
<?php
require 'vendor/autoload.php';
use Shotstack\Client\Api\EditApi;
use Shotstack\Client\Configuration;
$config = Configuration::getDefaultConfiguration()
->setHost('https://api.shotstack.io/stage')
->setApiKey('x-api-key', 'your_key_here'); // use the API key issued to you
$client = new EditApi(null, $config);
$response = $client->getRender($argv[1], false, true)->getResponse();
echo "\nStatus: " . strtoupper($response->getStatus()) . "\n\n";
if ($response->getStatus() == 'done') {
echo ">> Asset URL: " . $response->getUrl() . "\n";
}
Then run the script using the following command:
php status.php {renderId}
Replace {renderId}
with the ID returned from the slideshow.php script.
Repeatedly run the status.php script until the status is done and a URL is returned. A failed status will be displayed if something goes wrong. The video in the response can now be used in your application.
This tutorial explained the basics of using Shotstack and PHP to create and convert multiple images into a slideshow. However, you can improve the video with additional resources like text, overlay animations, luma mattes, and other features listed in the API reference docs.
All in all, this article has shown you how to build a fully automated video editing process for a variety of video use cases, including real estate, automotive, marketing, sports highlights, and more.
curl --request POST 'https://api.shotstack.io/v1/render' \
--header 'x-api-key: YOUR_API_KEY' \
--data-raw '{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.amazonaws.com/footage/beach-overhead.mp4"
},
"start": 0,
"length": "auto"
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}'