AI-Based Video Preview from Cloudinary

The early days of video on the web weren't great. We started with custom browser plugins and codecs, then moved to Flash, and eventually we found our way HTML <video>. Once we solved the technology problem, we started using more video for content and advertising. The next problem to solve became conversion; i.e. getting people to click the video thumbnail to watch it.

We implemented the placeholder attribute to show a thumbnail from the video but what was found much more effective was showing a video preview. I wrote a blog post about Creating a Short Video Preview but my technique was math-based, not intuitive. Cloudinary has rolled out a feature for creating intelligent video previews using artificial intelligence. With Cloudinary you can create a video preview that takes into account the most appealing parts of a video!

Using AI-Based Video Preview

After creating your free Cloudinary account, upload your videos. Cloudinary provides a host of APIs (PHP, Node.js, Ruby, Java, etc.) to automate the video upload process. Once the video has been uploaded and an unique ID has been assigned to it. You can refer to it via URL:

https://res.cloudinary.com/david-wash-blog/video/upload/v1553976846/arshavin-4-goals.mp4

To use the AI-based video preview generation, add the e_preview URL pattern with the duration of the preview you'd like:

https://res.cloudinary.com/david-wash-blog/video/upload/e_preview:duration_5/v1553976846/arshavin-4-goals.mp4

If you prefer to use another API like ReactJS, you can do so:

<Video publicId="arshavin-4-goals" >
  <Transformation effect="preview:duration_10" />
</Video>

On top of the amazing AI-based video generated from the original video, you can also apply other transformations to the generated video, like size modifications and filters:

https://res.cloudinary.com/david-wash-blog/video/upload/w_500/e_preview:duration_5/e_deshake:32/v1553976846/arshavin-4-goals.mp4

You can even swap formats, instead choosing to load the preview as an animated GIF:

https://res.cloudinary.com/david-wash-blog/video/upload/e_preview:duration_5/v1553976846/arshavin-4-goals.gif

As with loads of other Cloudinary features, Cloudinary provides an API and utility JavaScript library to interact with media. This API helper allows you to show a basic thumbnail, then show the video preview upon element hover:

See the Pen MRKJPP by David Walsh (@darkwing) on CodePen.

This behavior is used by many video-centric sites like YouTube!

Cloudinary has a habit of making difficult media tasks seem easy. I love that their APIs are constructed that you can accomplish almost anything by modifying a URL. Transforms and image resizing are one thing, but using AI to detect the important parts of a video is a next level feature you probably can't code yourself. Most importantly, these previews can drastically improve click-through conversion with very little effort!

Give Cloudinary a deep look: their features are unmatched and you can start for free!