: Create high-quality lightweight screencapture We're building the features page for our web product (online investment management service). We'd like to showcase some of the features by displaying
We're building the features page for our web product (online investment management service). We'd like to showcase some of the features by displaying short clips of user interactions with that feature (eg. here or here)
What we've found is that most of these interactions are basically screen recordings in mp4 or gif format. So, as bitmap formats, they have a particular resolution, usually relatively low, and they inevitably occupy between 250kb and 2-3 mb, which can add up if you want to have 10 of these on a page. So you have large file size and low quality.
Given that we have the PSDs and the HTML/CSS/JS, is there some way to easily create a vector based animation of some sort instead to replicate the user interaction? Maybe HTML or canvas animation or something? If this animation was described as a vector, we could probably achieve each animation in 20-30kb, creating huge load time savings (we're in India, where people are still on pretty slow connections) AND much better quality (because vector). Unlike real life videos, user interactions with a software product are by default great candidates for vector-based representation no?
Any ideas or solutions? Thanks!
More posts by @Harper654
2 Comments
Sorted by latest first Latest Oldest Best
Possibly helpful: How to embed screen capture videos as animated gifs in answers?
There are a number of screen recorders which will create small 10FPS video clips. The mistake most make is trying to create 30FPS when it's not needed.
You would need to build out any PSD to actual, live, functioning screens/pages. Otherwise, you need to get familiar with building animations in Photoshop, although that may take far more time. But you cna render video from Photoshop.
Maybe Camtasia or other pro screen recorder software is the way to go.
On the screen there is not so much things changing simultaneously that good compression were not possible even at full resolution.
Camtasia Player is needed to utilize this compression possiblity, MP4 does not assume that sparse changes between the frames.
Note: capturing the screen as vectors is not possible from the screen, screen is a bitmap.It can be done in the application that is watched or maybe somewhere in the depths of operating system's graphics rendering engine.
That's not a dead end, if yor application is used via web browser. There exists several "Web browser recorders" to save in hi res, what happens on the browser screen. Google: "Record web browsing". You get several hits.
Offtopic: All of them surely are not for teaching but for finding reasons to give a lesson.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.