I need to display several items on a page that represent videos. Embedding video players (even just a couple) causes a ton of load on the user's CPU (you can hear your computer's fan spin up immediately to the maximum speed). My thought to mitigate this is to generate animated GIFs to represent clips of the videos. This seems to cause a load on the CPU but not nearly so great. It seems that once the GIFs have finished loading, the CPU load is less of an issue.
I'm only testing this by putting about 15 GIFs on a page, loading it up in Chrome on my MacBook Air and watching Activity Monitor.
http://yawmp.com/temp/anigif_test.php
Is my logic sound that Animated GIFs require much less CPU resources than embedded videos? Are there memory issues I should be concerned about? Are there any downsides to going this route in terms of system resource pain for my users?
If there are a few frames in the animated gif, the browser is just cycling through those frames - that isn't a particularly big deal. The memory issue would become a problem if you put enough of them on a page.
However, that is a lot of stuff moving, flickering and otherwise demanding attention. Maybe you could switch from a static preview image to the animated gif on mouse over so there is a bit less going on at once. Then if it interests them they can click through and load the video.
Related
I want to add a gif of an app that I'm working on to the app's website. Previously, I used quicktime to screen record my computer and then used EZGIF to convert the video into a gif. Unfortunetly, in order to get the gif to a reasonable size to embed on my website (~5MB), the quality goes completely down the drain (you can see the bad quality gif on the website now.
To show off enough functionality of the app to make it worth going on the hompepage, the original video that I'm recording is ~45 seconds.
Are there other, better methods for recording / compressing gifs for websites?
I'm trying to ensure (to the extent possible) that an HTML5 video begins playing only only when it is able to play through completely without buffering. For context, the MediaStream of the video is then used to mix with another audio source and sent over peer WebRTC connections. The videos are typically 5-10MB and a few minutes long (i.e. a decent broadband connection should have no trouble loading the entire video well before it's done playing).
To achieve this, my code currently waits for the canplaythrough event on the video element to begin and calls play() when it fires.
This "works" in the sense that the video begins playing and, in most cases, buffering is sufficient for the video to play through uninterrupted. But, in a few cases (specifically for two people so far that happen to both have been running Chrome on MacBook Airs and with apparently not incredible but decent broadband Internet connections) the video plays staggered and choppy---which I believe to mean the video has not sufficiently buffered.
Are there better techniques for either ensuring that video is sufficiently buffered on most browsers?
Would using fetch() to buffer the entire video in memory probably do the trick? Or is a resulting blob() also actually lazily buffered behind the scenes?
Are there good practices for testing and debugging these sorts of issues given that I can't really replicate this locally?
I have built a tool called Stream or Not that might help on the network side. It will tell you how long the video takes to start, how many stalls, etc. You can use your browser's devTools to throttle the network (and in Chrome, you can emulate the CPU).
Honestly - to see if the network is the issue, as long as the bitrate (use FFprobe https://www.streamclarity.com/probe?url=) is lower than the network speed, you are not network constrained.
There is another possibility. What are the dimensions of your video? How what are the dimensions of the viewport on the browser? If you are asking the device to chop down a lot of pixels - the playback limit might move away from bandwidth to CPU processing speed. I have seen this happen on mobile devices and on older Macs trying to play 4k videos - there just isn't enough CPU to process that many pixels.
I'd test the network speeds, just to be sure.
Make sure you are not sending more pixels than you need. Underpowered devices will have issues.
I have multiple HTML5 videos on a webpage I am creating. They autoplay and loop like gifs.
However, the page barely loads with the 6 or so 15 sec videos. Is there a way to optimize these videos so that the page loads them and itself faster?
EDIT:
Most Buzzfeed pages have dozens of video "gifs" on one page and they load fine. I'm wondering how I can do this? Currently the browser becomes overloaded.
Most devices have optimised hardware and software to play videos, to reduce CPU and preserve battery life for example.
Once you ask the device to play multiple videos at the same time you start to overload any optimal paths and playback may fall back to software to do all the heavy lifting.
One way round this, if your particular application will work with the approach, is to combine the videos on the server side into a single video.
You can still make this look like separate videos, by hiding the main controls and adding overlays with individual buttons over the relevant area.
If this does not work for you, then making the videos as low bandwidth and as short as possible will help. If you can avoid autoplaying this will obviously make a big difference also.
As a note, Buzzfeed does have multiple videos on a page but they do not auto play when I look at their pages, which means all they have to download and display is the thumbnail (maybe we are looking at different pages - if you have an example page that autoplays multiple videos, can you give a link?_.
I am working on a site that will have a video on it. I am using HTML5 with a flash fallback and am hosting the video on the site (the client does not want to use Vimeo, YouTube, etc.). The video is a little over 4 minutes long and I have compressed the video down to 12.7MB for the mp4 format and around 23MB for webm and ogv. Are these file sizes too large? I can maybe get them smaller, but the quality really suffers. I also have the entire Adobe Creative Suite, so if someone has a good way to compress a video really well, while maintaing quality and a high resolution, I'm all ears!
Thanks!
That's pretty acceptable. Keep in mind that this four minute video will load fully in a little over 10 seconds on most consumer-level broadband connections.
I'm building a large flash site (AS3) that uses huge FLVs as transition videos from section to section. The FLVs are 1280x800 and are being scaled to 1680x1050 (much of which is not displayed to users with smaller screens), and are around 5-8 seconds apiece. I'm encoding the videos using On2's hi-def codec, VP6-S, and playback is pretty good with native FLV players, Perian-equipped Quicktime, and simple proof-of-concept FLV playback apps built in AS3.
The problem I'm having is that in the context of the actual site, playback isn't as smooth; the framerate isn't quite as good as it should be, and more problematically, there's occasional jerkiness and dropped frames (sometimes pausing the video for as long as a quarter of a second or so). My guess is that this is being caused by garbage collection in the Flash player, which happens nondeterministically and is therefore hard to test and control for.
I'm using a single instance of FLVPlayback to play the videos; I originally was using NetStream objects and so forth directly but switched to FLVPlayback for this reason. Has anyone experienced this sort of jerkiness with FLVPlayback (or more generally, with hi-def Flash video)? Am I right about GC being the culprit here, and if so, is there any way to prevent it during playback of these system-intensive transitions?
Jerkiness in FLV/F4V playback is hardly the result of garbage collection - the video is actually kept in memory until it is fully unloaded, so there's no garbage collection taking place at all (unless you've done something unorthodox like placing the video on a container with cacheAsBitmap set to true).
Switching to F4Vs if you don't need specific FLV features (like the link posted by daidai suggests - disclaimer, it's my blog) would help, but overall, you also have to be aware of anything that's impacting compositing of the video on screen. Because a big size video forces everything that's overlapping it to be re-rendered, any small object can have a big impact on performance.
Do you have things on top of the video? Try getting rid of them, if possible, or setting cacheAsBitmap to true (if they're not animated). This is specially good for complex vector drawings or text (bitmaps/images are much faster to draw). If they have different blending modes, you're sort of screwed - can you use the normal blending mode instead?
Do you have anything below the video? If so, get rid of them while the video is playing (just set visibility to false).
To check on unnecessary renderings, somehow pause the video, right-click, turn on 'show redrawn regions' (debug player). Do you see the red square drawing continuously? Then there's something happening there on the background, better to get rid of it.
Do you have anything happening on the background via onEnterFrame or timers/intervals? Try pausing it.
Is your video 30fps, and a CG rendering (eg, can use motion blur)? If yes, try rendering at 24fps instead, or something between - still good quality, but much less data to decode and draw.
Can you use smaller videos? Even if you're still rendering them at the same bigger size, less pixel data to decode and render helps immensely, and the impact in quality can be pretty small.
That pretty much sums it all. Getting rid of everything else on screen is usually your #1 priority though.
Have you tried encoding the videos in H.264 instead? Flash player supports them for some time now, it may end up working better. That's what most people doing HD video in Flash use (eg Youtube, Vimeo, etc).
Just as a test, try plaing a 1080p HD video on youtube and see if that pauses at all for you.
Check out http://zehfernando.com/2010/benchmarking-video-playback-performance-in-flash/