Overlay videos with dynamic artwork, generated with HTML & JS
Transloadit customer HEROFI uses our service to dynamically generate artwork and then 'burn' it into videos, in order to create unique and customized content for their customers.
HEROFI's use case illustrates how powerful our building blocks can be when you add a little bit of creativity. HEROFI was gracious enough to let us showcase a sample of how they're watermarking user uploads for display in Buffalo Wild Wings restaurants.
While HEROFI performs a lot more magic in the form of slowdowns and concatenation, this demo will focus exclusively on the HTML-generated watermark case.
It all starts with an S3-hosted HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body style="background: transparent">
<script>
var logo_url = new URLSearchParams(window.location.search).get('logo_url')
var store_name = new URLSearchParams(window.location.search).get('store_name')
var label = new URLSearchParams(window.location.search).get('label')
var watermarking = [
{
type: 'image',
src: logo_url,
css: {
position: 'absolute',
left: '60px',
bottom: '90px',
'max-width': '200px',
'max-height': '100px',
},
},
{
type: 'storetext',
metatag: 'x-amz-meta-storename',
text: store_name,
css: {
position: 'absolute',
left: '60px',
bottom: '60px',
background: '#ffd200',
padding: '4px',
color: '#fff',
width: '200px',
'text-align': 'center',
},
},
{
type: 'cliptext',
metatag: 'x-amz-meta-cliptitle',
text: label,
css: {
position: 'absolute',
right: '0',
bottom: '60px',
background: 'rgba(0,0,0,.1)',
padding: '20px',
color: '#fff',
'font-size': '48px',
},
},
]
function getStyle(obj) {
var style = ''
for (var key in obj) {
style += key + ':' + obj[key] + ';'
}
return style
}
if (watermarking && watermarking.length) {
for (var i = 0; i < watermarking.length; i++) {
switch (watermarking[i].type) {
case 'image':
var div = document.createElement('div')
div.innerHTML =
'<img style="' +
getStyle(watermarking[i].css) +
'" src="' +
watermarking[i].src +
'" />'
document.getElementsByTagName('body')[0].appendChild(div)
break
case 'storetext':
var div = document.createElement('div')
div.innerText = watermarking[i].text
div.style = getStyle(watermarking[i].css)
document.getElementsByTagName('body')[0].appendChild(div)
break
case 'cliptext':
var div = document.createElement('div')
div.innerText = watermarking[i].text
div.style = getStyle(watermarking[i].css)
document.getElementsByTagName('body')[0].appendChild(div)
break
}
}
}
</script>
</body>
</html>
Step 1:
Handle uploads
We can handle uploads of your users directly.Learn more
":original": {
"robot": "/upload/handle"
}This bot receives uploads that your users throw at you from browser or apps, or that you throw at us programmatically
Step 2:
Transcode, resize, or watermark videos
We offer a variety of video encoding features like optimizing for different devices, merging, injecting ads, changing audio tracks, or adding company logos.Learn more
"video_resized": {
"use": ":original",
"robot": "/video/encode",
"ffmpeg": {
"b": "3200k",
"maxrate": "3200k",
"bufsize": "3200k",
"bt": "4800k"
},
"ffmpeg_stack": "v7",
"height": 720,
"preset": "webm",
"resize_strategy": "fillcrop",
"width": 1280
}This bot encodes, resizes, applies watermarks to videos and animated GIFs
Step 3:
Take screenshots of webpages or HTML files
We can process your documents in an automated way, saving you costly resources.Learn more
"watermark_screenshot": {
"robot": "/html/convert",
"format": "png",
"height": 720,
"omit_background": true,
"url": "https://s3.amazonaws.com/demos.transloadit.com/democode/janice.html?logo_url=https%3A%2F%2Fs3.amazonaws.com%2Ftest.transloadit.com%2Fbww_lockup_logo.svg&store_name=Eat%20at%20Joes&label=Today%2030%25%20OFF",
"width": 1280
}This bot takes screenshots of web pages or uploaded HTML pages
Step 4:
Transcode, resize, or watermark videos
We offer a variety of video encoding features like optimizing for different devices, merging, injecting ads, changing audio tracks, or adding company logos.Learn more
"video_watermarked": {
"use": {
"bundle_steps": true,
"steps": [
{
"name": "video_resized",
"as": "video"
},
{
"name": "watermark_screenshot",
"as": "watermark"
}
]
},
"robot": "/video/encode",
"ffmpeg": {
"b": "3200k",
"maxrate": "3200k",
"bufsize": "3200k",
"bt": "4800k"
},
"ffmpeg_stack": "v7",
"height": 720,
"preset": "webm",
"watermark_size": "100%",
"width": 1280
}This bot encodes, resizes, applies watermarks to videos and animated GIFs
Step 5:
Export files to Amazon S3
We export to the storage platform of your choice.Learn more
:originalvideo_resizedwatermark_screenshotvideo_watermarked"exported": {
"use": [
":original",
"watermark_screenshot",
"video_resized",
"video_watermarked"
],
"robot": "/s3/store",
"credentials": "demo_s3_credentials",
"url_prefix": "https://demos.transloadit.com/"
}This bot exports encoding results to Amazon S3
Live Demo. See for yourself
Loading Uppy demo…
This live demo is powered by 
Uppy, our open source file uploader that you can also use without Transloadit, and 
tus, our open protocol for resumable file uploads that is making uploading more reliable across the world.
Build this in your own language
<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i --save @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
import {
Uppy,
Dashboard,
ImageEditor,
RemoteSources,
Transloadit,
} from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
const uppy = new Uppy()
.use(Transloadit, {
waitForEncoding: true,
alwaysRunAssembly: true,
assemblyOptions: {
params: {
// It's often better store encoding instructions in your account
// and use a `template_id` instead of adding these steps inline
steps: {
':original': {
robot: '/upload/handle',
},
video_resized: {
use: ':original',
robot: '/video/encode',
ffmpeg: {
b: '3200k',
maxrate: '3200k',
bufsize: '3200k',
bt: '4800k',
},
ffmpeg_stack: 'v7',
height: 720,
preset: 'webm',
resize_strategy: 'fillcrop',
width: 1280,
},
watermark_screenshot: {
robot: '/html/convert',
format: 'png',
height: 720,
omit_background: true,
url: 'https://s3.amazonaws.com/demos.transloadit.com/democode/janice.html?logo_url=https%3A%2F%2Fs3.amazonaws.com%2Ftest.transloadit.com%2Fbww_lockup_logo.svg&store_name=Eat%20at%20Joes&label=Today%2030%25%20OFF',
width: 1280,
},
video_watermarked: {
use: {
bundle_steps: true,
steps: [
{
name: 'video_resized',
as: 'video',
},
, {
name: 'watermark_screenshot',
as: 'watermark',
},
],
},
robot: '/video/encode',
ffmpeg: {
b: '3200k',
maxrate: '3200k',
bufsize: '3200k',
bt: '4800k',
},
ffmpeg_stack: 'v7',
height: 720,
preset: 'webm',
watermark_size: '100%',
width: 1280,
},
exported: {
use: [':original', 'watermark_screenshot', 'video_resized', 'video_watermarked'],
robot: '/s3/store',
credentials: 'demo_s3_credentials',
url_prefix: 'https://demos.transloadit.com/',
},
},
},
},
})
.use(Dashboard, { trigger: '#browse' })
.use(ImageEditor, { target: Dashboard })
.use(RemoteSources, {
companionUrl: 'https://api2.transloadit.com/companion',
})
.on('complete', ({ transloadit }) => {
// Due to `waitForEncoding:true` this is fired after encoding is done.
// Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
console.log(transloadit) // Array of Assembly Statuses
for (const assembly of transloadit) {
console.log(assembly.results) // Array of all encoding results
}
})
.on('error', (error) => {
console.error(error)
})
</script>
So many ways to integrate
Transloadit is a service for companies with developers. And there are many ways developers can put Transloadit to good use inside your company to automate media processing.
Bulk imports
Add one of our import Robots to acquire and transcode massive media libraries.
Handling uploads
We are the experts at reliably handling uploads. We wrote the protocol for it.
Front-end integration
We integrate with web browsers via our next-gen file uploader Uppy and SDKs for Android and iOS.
Back-end integration
Send us batch jobs in any server language using one of our SDKs or directly interfacing with our REST API.
Pingbacks
Configure a notify_url to let your server receive transcoding results JSON in the transloadit POST field.
On-demand
Use our Smart CDN to adapt files on-demand and stream them directly to your users.
Document processing
Image processing