Serverless Video and Audio
Uploadcare optimizes your content delivery. The main thing here is delivering your media assets via our CDN. Another thing is optimizing your content. We support video transcoding, GIF to video conversions, and image processing; audio transcoding is on our roadmap.
There is an article on our blog about accelerating image content by 9x: that is a rough estimate of a load time improvement rate you can achieve with Uploadcare. With images, you can even do it in an upload-free way: by using UC Optimize.
This article covers using UC as a source for your
<video>stands for the The HTML Video element. It allows embedding a media player which supports playback into the document. The element can also be used for embedding audio content, but it is stated that
<audio>provides a better user experience in the case.
<audio>is used to embed sound content in documents. It can also serve as the destination for streamed media using MediaStream. You can learn more here.
<audio> provide support for multiple
That would be the preferred use case: your client browsers will then decide
which source choice is optimal.
To start with, upload some video or audio content to Uploadcare. That can be done in three simple steps:
- Make an account; it’s free.
- Navigate to your dashboard and choose a project your files will go to.
- Navigate to “Files” and hit “Upload new files.”
Hitting “Upload new files” fires an Uploadcare Widget dialog. Choose files from a preferred source; your upload will start in the background. Hit “Add” and your files will appear on the list in the “Files” section.
Your files are now on UC and delivered via our CDN. You can notice their URLs changed, and now look like that; we call those “CDN URLs:”
:uuidis a unique file identifier on UC.
:filenameholds an original filename.
You are now free to use those CDN URLs in your
<source> elements within
<audio>. The following section covers some examples.
The following example provides client browsers with two sources to choose from. It also includes the fallback message, which is used when the HTML5 video element is not supported by a client browser:
<video width="340" controls> <source src="https://ucarecdn.com/31edfb56-35a7-4d54-9b76-d925cbf6c9f3/video.webm" type="video/webm" /> <source src="https://ucarecdn.com/98430942-70db-4230-b1a4-4d428281e127/video.mp4" type="video/mp4" /> You browser does not support the <code>video</code> element. However, you can <a href="https://ucarecdn.com/98430942-70db-4230-b1a4-4d428281e127/video.mp4"> download </a> the MP4 version of the video. </video>
The simpler example using
src instead of
<source> along with the list of
attributes supported by
<video> can be found here.
The above example covers the case where you have to manually create and upload
different versions of your video to use with the
You could instead use our Video Processing to generate those
versions based on a single uploaded file. This is how that could look like:
<video width="340" controls> <source src="https://ucarecdn.com/f35cdbe1-e77b-4b48-aab6-97f869775b4a/video/-/format/webm/example.webm" type="video/webm" /> <source src="https://ucarecdn.com/f35cdbe1-e77b-4b48-aab6-97f869775b4a/video/-/format/mp4/example.mp4" type="video/mp4" /> You browser does not support the <code>video</code> element. However, you can <a href="https://ucarecdn.com/f35cdbe1-e77b-4b48-aab6-97f869775b4a/video/-/format/mp4/example.mp4"> download </a> the MP4 version of the video. </video>
<video> use case would be about converting your
animated GIF files to save bandwidth and optimize load times. Those can be
clickable; here is an example:
<a href="https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/source.gif"> <video width="340" autoplay loop muted webkit-playsinline playsinline> <source src="https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/format/webm/road.gif" type="video/webm" /> <source src="https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/format/mp4/road.gif" type="video/mp4" /> </video> </a>
While we are not currently supporting audio transcoding, you can largely optimize sound content load times by using our CDN.
The following example provides client browsers with three sources to choose from.
It also includes the fallback message, which is used when the
is not supported by a client browser:
<audio controls> <source src="https://ucarecdn.com/784e2d2b-ffe4-46e1-a5a3-15799f1388c5/detroitkeys.ogg" type="audio/ogg; codecs=vorbis" /> <source src="https://ucarecdn.com/92025d67-677b-4148-8284-2d7e03306d4c/detroitkeys.mp3" type="audio/mpeg" /> <source src="https://ucarecdn.com/01e51905-bed7-411c-bb4f-feca0d944dee/detroitkeys.wav" type="audio/wav" /> Your browser does not support the <code>audio</code> element. However, you can <a href="https://ucarecdn.com/92025d67-677b-4148-8284-2d7e03306d4c/detroitkeys.mp3"> download </a> the MP3 version of the audio. </audio>
Uploadcare helps you deliver media content across 220k servers in 130 countries.
You are free to use CDN URLs when embedding content via
When it comes to video content, we offer many transcoding options.
Transcoding audio is on our roadmap, but we would love to get your feedback. How often do you need audio transcoding as a service and would you like it RESTful? Just drop us a line.