We can post an animated GIF on facebook.But Facebook saves it as a video. for an example This is an animated GIF on Facebook . But if you look at the source, then you can find This video . Also, all animated stickers are like this on the source. They are animated by a JS. Why Facebook doesn't use GIF files directly? Is there any good reason?
You can not easily start/stop GIF animations.
“Stopping” them would only be possible by replacing them with a static image anyway; and trying to get a GIF animation started with precise timing is hard to achieve cross-browser as well – some browsers play an animation only once, if that same image gets used somewhere else again later, they won’t re-play the animation, start it at different times, etc.
So most likely this choice was made to have full control in that regard, which using a video instead of a GIF easily offers.
(Plus, advanced current video codecs often offer better compression than the rather old GIF format.)
Related
I'm trying to find a way to make a program similar to after effects or blender in the browser, in the sense of developing certain animations etc., and compiling the animations and keyframes info a video, preferably frame-by-frame
Using the built in methods of the canvas and media recorder, I have yet to find a way to process a video by inserting one frame at a time, to a set framerate, usually the media recorder just records live in real time, it doesn't seem to be meant for frame by frame rendering, and also the canvas is limited in the sense of being too slow or unreliable to consistently get the image from it using either toDataURL or glGetPixels etc.
Is there a way to process videos in JavaScript without using the canvas at all?
Meaning, instead it would just generate the image data and display it as an img tag, or even a real time low quality video encoding and streaming, on the client side, and attach the stream to a video tag somehow, or perhaps the canvas could be used for development of the keyframes etc. but the actual processing would be done by scratch, is this the best way to go about this? And if so, how can it be done?
I have this task to make an iframe of a presentation appear on an click. then you can control that presentation, like the page you want or go forward and backward.
The problem is I can't use the cloud solutions, because the data should be on premises.
I've thought about converting it to a video, it would be easier to control it and also to keep the animations.
I've also thought about converting it to a pdf file and then show the slides, like slideshare does in this Example.
Is there anyway I can use the ppt directly or even convert it to another format that would be optimal and user friendly, if so, how? is there any APIs or Javascript libraries? what would you recommend?
So i've found a solution of this, i want to share it with you.
If you need to present a ppt-like presentation on web without using the cloud solutions.
The first one is used to keep animation of the presentation:
I converted the ppt to a video , and then used Video.js library that enables you full control over the video.
I've desactivated the control of the video and made my own controls with Html and css. GoForward , Backwards or pause or play or restart the presentation.
i was able to pick and to know the slide i'm on and how much time in every slide by dividing the full time of the video by the number of slides i have in it. (if we suppose they have equal time).
The Second one is used for better quality but no animation: by converting the PPT to PDF.
How could you programmatically convert a YouTube/Vimeo video into a series of animated images that each reflect 5 seconds of the video? Essentially, the goal is to deconstruct the video into silent, 5-second animated pictures -- think "moving pictures" from Harry Potter.
One option is to slice the video into 5-second video chunks, but the output should feel like animated GIFs ... that is, play instantly, be lighter than combining 150 pictures into one JavaScript slideshow (assuming 30 FPS), but have the image quality of a JPG or PNG. If this is possible with video, then it's an option we're open to exploring.
Another option is to take screen shots of the video, but that is not programmatic.
Ideas?
The output needs to get rendered in HTML5 on Mobile Safari.
You've a bit of a problem here — quality is directly related to file size. So if you create a video of 30fps (higher than regular broadcast TV, really?), you're going to run into issues with it being light & fast loading.
I don't know if I'd go down the route of making actual GIFs if you're looking for a high-ish framerate, but if it's for a web project, HTML5 video tag should be able to have autoplaying video that integrates into the page fairly seemlessly.
What you would want to do here is take a programme like Handbrake, put the video at the highest possible compression settings (lowest quality/framerate) & slowly bring it up until you have something that you think is the minimum you can get away with.
From there, you can look into scripting the process using these settings & something like FFmpeg. You'll probably also want to remove video metadata to save as much filespace as possible.
There is a program at enounce.com that it will increase the play speed of a video in a browser. I think that 95% of videos on the internet run on flash therefore this tool can be useful. I am wondering how that program was created. Maybe they modify the html source in the browser? perhaps it looks for the swf video playing on your browser and it injects some JavaScript on that html element to increase the speed. I been researching on Google and I think it is possible to alter the playback speed of a video with JavaScript. If it is not modifying the html page then it will be nice to at least know how this can be achieved. Also if a video plays on your browser it has to be saved somewhere in your computer I believe. That's why you can seek back and forth once the video finished downloading. why is it that it is almost impossible to find it and the only way of getting that video will be by capturing the packages with a package sniffer? anyways that is not my question I am just really curious on how that program achieves doing what it does. it speeds up everything even Pandora songs.
MySpeed seems to intercept the media stream coming from the server into the Flash player that sits in your browser. It changes the speed on the fly, and sends the result to the Flash player.
PS: If you need to control the playing speed of your own videos I recommend looking into the VLC Browser Plug-in, or the QuickTime player, which also has very good speed control features (from Javascript). Or you could use the HTML5 <video> tag.
Afaik, Flash-based players like Longtail/JWPlayer and Nonverbla don't have very good support for this.
Is it possible to show how many % of the video is loaded?
I just need a simple string like: 32% loaded...
(I use non-streaming (progressive loading))
The FLV player that is built in, you can pretty much only do what you see, so displaying the % loaded, if not already displayed in the skin itself, is either not supported, or not documented. You can make your own skin http://www.adobe.com/devnet/flash/articles/flvplayback_programming.html or use one of the many other available options http://www.google.com/search?q=flv+player, or try the Widget Browser version (which should be CS4 compatible) of the HTML5 Video Player Widget, and that player is based on the following http://www.kaltura.org/project/HTML5_Video_Player it is theme-able. I've not seen a way to show the percentage yet, but perhaps their docs show how to do it.
There is another reference for talking back and forth between Flash and JavaScript, http://kb2.adobe.com/cps/156/tn_15683.html, but you'd need to know what to call, and again, the built in player doesn't appear to be documented well, at least from external interaction, or modifications of the skins themselves.
I know this is not dreamweaver player and it doesn't show %, but this is what I use in my projects http://www.longtailvideo.com/players/
It is a pretty cool player.