Announcing TwicPics for Videos
We're launching context-aware optimization & transformation for videos in beta!
Laurent Cazanove October 24, 2022 · read
We’re proud to launch videos support in beta for all our Pro and Enterprise customers! We couldn’t be more excited to bring context-aware optimization and our transformation API to animated media. That’s right. All the TwicPics magic is now available for videos. Let’s dive in!
Introducing TwicPics for Animated Medias
TwicPics videos aims to streamline the process for integrating images and videos. The ideal candidates for TwicPics video integration are hero videos, product videos, and thumbnails. All videos generated by the TwicPics API are muted, to be looped and played automatically. You can think of them as GIFs, but with high quality.
TwicPics enables integration of native, short videos embed—not players for video streaming.
For more technical details on duration and weight limitations and formats and codecs, make sure to read our Video Optimization documentation.
Quick Start Guide
Let’s take a look at how we can integrate TwicPics video optimization solution in your website. First, we need to configure your project dependencies.
Add TwicPics components to your dependencies:
npm install @twicpics/components
This article will provide examples using the components package. If you cannot use the components, you can fallback to the vanilla JS script.
Now, let's install TwicPics in your application:
You're all set! Let's get into the interesting stuff.
Now that your app is setup, you can optimize videos as following:
https://demo.twic.picsdomain, but it's the same original file.
<TwicVideo> component interpreted the CSS layout to request the appropriate video optimization to the TwicPics API. Thanks to a default step of 100 for videos, TwicPics optimizes the number of variants to maximize cache efficiency.
Let's try to apply a transformation to our video. Say we want to change the focus point to be the top left corner ie.
Well, that doesn't look very good. But you got the idea.
You can also use the
pre-transform prop to apply any transformations supported by the API, such as flips, zooms, crops, etc.
focus="auto"is not supported for videos yet.
If you open your browser developer tools to inspect the videos above, you’ll see that TwicPics generated all the
<source> necessary to ensure full browser compatibility. What’s more—if you resize the window, you will see that TwicPics regenerates the API request URLs while taking into account the rendered size and the DPR (Device Pixel Ratio).
For a more in-depth documentation of everything video-related, we added a new Video Optimization section to our docs. For hero videos and other content where the Largest Contentful Paint (LCP) is at stake, we also designed a guide focused on Handling LCP videos.
We can't wait to hear your feedback on this major milestone for us. If you need help during your integration, please reach out to us using the live chat (at the bottom right of the screen.) We'll be glad to help! In case of bugs or feature request with our components, you can open an issue on Github.
Videos are currently in beta for our Pro tier (and above) customers—we’re looking forward to expand it to all our users soon.