I visited http://www.sublimetext.com today and was intrigued by the screencast animation the website has on its opening page. It looks like a mashup between video and slideshow. I've seen them at other modern websites as well, but I assumed it was some HTML5 video tag trickery. But when I looked at the source of sublimetext webpage, I was confused.
The animation on this page is created on a HTML5 2D canvas with plain javascript using base PNG images. Each slide is loaded from a PNG file. The animation is achieved by modifying only handful of pixels from the image. The animation javascript applied these changes on the original PNGs at regular intervals. You will find these deltas stored in *_timeline variables in the script.
My question is what tool can generate such deltas? How can one record one's desktop screen and create such base PNG + animation deltas?
I like this approach because it seems most efficient format for screencasts, where changes in consecutive frames are minimal.
Update 1 I know there are techniques to achieve this using GIF (Check https://askubuntu.com/q/107726), but what cool tool can generate this javascript code that can convert PNG deltas to animation. Googling hasn't helped me find it out.
Update 2 The author of the screencast (and sublimetext) replied to my question on sublimetext forum. He did it using a custom python script and plans to write a blog post about it sometime http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252
Jon Skinner, the creator of Sublime Text wrote about the process on his website
He also published the encoder he wrote on GitHub
look at one of their images and you'll understand how it works:
http://www.sublimetext.com/anim/command_palette_packed.png
they just cutting and inserting appropriate portions of image into the appropriate positions of canvas element, but if your question is how to make such image, I don't have an idea.
I guess with some software, not by hand, but I don't know such soft...
Related
Without a screen recorder, Is it possible to directly export, render, or save HTML CSS animations to a video file? I'm also aware SVG within a html document could also be a part of such a process.
I tried searching online for a solution, but I only get "Export After Effects to CSS...". Seems like there's no answer. Surely if your browser can render it, there must be some code that'll be able to export it..?
Ideally, id write some divs and some css animation code, see how it looks on Chrome, then maybe click a button and export little clips of what the browser rendered. Could be an extension, or anything.
Many thanks.
There's a good extension where you can create a screencasting from a website and export it to AVI, on https://screencast-o-matic.com/tutorial/save-as-a-video-file
The thing is that you won't be able to achieve that without recording your screen.
I'm assuming you can copy the code and pass it to an expert in video edition and they will create an emulation from the animation you want, they may do it in Adobe After Effects or a different video software, but that's like the expensive solution.
Fiverr might have some freelancers that can do that.
On YouTube's player, when you hover on progress-bar and traverse your mouse along, you see a series of thumbnails, as well as time-values. This is great, when you're tying to find a scene that you know of visually, and want its time-value.
Whereas, on videojs player, you see only time-values.
(On X-Finity (Comcast, their fast-forward similarly shows rapid series of thumbnails. But, googling seems to reveal that Videojs doesn't have fast-forward. And, I think I'd prefer YouTube's feature over a fast-forward.)
So, bottom-line question is: How to make Videojs player behave like YouTube's?
(I'm thinking this would be difficult to implement for the end-user, in javascript. Detecting that the slider is being moved is no doubt straight-forward, but code to display thumbnails would be the part that I have NO IDEA
how to accomplish.)
Anyone know how to program this?
BrightCove developed a 'thumbnails' plugin that implements this.
See their example coding here:
https://support.brightcove.com/display-thumbnail-previews-plugin#Example
There is more specific discussion on the subject in this forum here:
How to generate video preview thumbnails for use in VideoJS?
My first cut at implementing the notion is here:
https://weasel.firmfriends.us/Private3-BB/
I've been searching for a way to put a looping animation with alpha over top of web content for a few weeks now. The fact that I can't seem to find anyone asking this question or any answers to it makes me think the solution is so mind-numbingly easy that no one needs to ask it.
For an example of this effect go to bonfirestudios.com
They have used this technique multiple times throughout the website, most notably their logo on the main page. They have an animation loop playing over top of their website content. It could just be a video played with a screen blending mode, but my knowledge of html and css is so limited I'm not sure what I should be looking for.
It seems so simple in concept: play a video (with alpha data) on loop, but I can't find anything (or don't know where/how to look specifically) that explains how to achieve this effect. Notably, there are no video controls or anything to otherwise indicate it is a video that's playing. I've checked their code, but my limited understanding of javascript and the like find it hard to know what I'm looking for.
Any help or direction is greatly appreciated, thank you.
It is a video playing (right-click over the animation and you'll see such option as "save video").
The container format is webM (which can contain VP8 or VP9 video codec). This format is from Google and supports transparency.
I'm looking for a tool/solution that would allow me to convert a power point presentation into a fully html5 website. I've seen solutions like iSpring and html5point which just make each slide as an img or iSpring whihc is good for simple slides. In my case the slides contain graphics and shapes (no animation or video though). Any adivce ?
I don't know of any of the solutions you mention, but the last time I had to do this I found it easiest to export (Save As ...) the .ppt as a single webpage and then copy and paste chunks of it into a template I had created previously.
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/