Heads up! This content is relevant for Clipchamp for personal accounts. Try this link If you're looking for information about Clipchamp for work accounts.
On this page
This blog post is about how to use the Clipchamp API in reverse. We show you how to stream legacy video formats such as Adobe Flash video to modern Web browsers. All of this without suffering the server-side transcoding cost.
A short history of browser-based video (sort of)
Video formats, also referred to as “container formats”, and their contained audio and video codecs are a mess to deal with. Flash video (.flv) was once a safe bet. That was thanks to Adobe’s efforts to bring its Flash plugin to every browser under the sun. Then came Steve Jobs, who infamously ditched Flash on the iPhone. Ever since, other browser vendors have followed suit.
Before Flash, there were technologies like RealVideo, MPEG-1 and MPEG-2. Support for these is long deprecated by most browsers. If you love open source then the OGG video format will be familiar to you. Alas, Apple and Microsoft never quite liked it enough to support playing back OGG videos in their Safari and Internet Explorer/Edge browsers.
The current best bet for serving videos on the Web is to use the MP4 video format. MP4 videos on the Web typically contain H.264-encoded video and AAC-encoded audio streams. All major browsers meanwhile support this format+codec combo. And that’s a good thing.
But what if you have a library of video files using older formats that are no longer supported? This is where the Clipchamp API and its ability to stream legacy video formats come to the rescue.
About the Clipchamp video API
Our HTML5 video API is the world’s first and only video capturing technology for the Web (entirely in HTML5) that converts and compresses videos in the browser before uploading them to a cloud storage service such as AWS S3.
This means that you can upload a GoPro video file in a fraction of the time this would usually take by having it compressed by a factor of up to 20 (or even more). You can also have your 1990s AVI video files converted to MP4 before uploading them. In other words, the default use case of our video API is to “ingest” videos from your website visitors.
However thanks to our client-side video processing technology, there is another application for the API: using it in reverse to stream legacy video formats on demand without having to transcode your entire library!
Using the Clipchamp video API in reverse to stream legacy video formats
Imagine you have a library of video files using some legacy format that has fallen from grace, such as Adobe Flash videos (.flv files). You could either convert all of your videos to MP4 (e.g., by using the batch video conversion feature on clipchamp.com).
Or you could have them converted “on demand” and directly on the end user’s computer before they get played. Here is a code snippet that illustrates the principle, where on user demand, a legacy video file is downloaded, then converted into MP4 using the Clipchamp API and ultimately the MP4 output video is embedded in an HTML5 tag. Neat, no?
Tips and Tricks
First, you need to sign up for the Clipchamp API – each of its plans comes with a free 14-day trial. This will give you an API key that you need in order to embed the Clipchamp API script tag into the section of your site – see here for the initial setup steps.
Next, we download the video file upon clicking a button using the fetch API. You can also choose to preload it immediately upon loading the website. All you need is the JavaScript “Blob” object before making the call to the Clipchamp API.
When calling the Clipchamp API, the “direct” input option provides a way to pass one (or many) Blob objects (each representing an input video file) to the API without requiring any user interaction. You will need to set the “inputs” parameter to a single-element array [“direct”] and then pass the actual video blob to the nested “direct.files” parameter.
Finally, you need to choose an output. In the example, we have opted not to upload the output video, but keep it local to the client. In the onVideoCreated callback function, we simply create a URL from the output video blob and inject an HTML5 tag using that URL into the site. And that’s it! Your legacy videos will continue to play back – time to bring back the dancing baby 🙂
You can also choose to have the output video uploaded to your account on any of our supported upload destinations (at the time of writing: AWS S3, Microsoft Azure, Google Drive, Dropbox, and YouTube).
Doing so will not only play the video for the user who requested it, it will also make the converted video available on your end. In other words: your users can’t only watch your legacy videos but are also helping you turn them into modern formats!
