I have a website where upon loading, a 9 MB video autoplays. I also have it so that whenever a user clicks off the homepage using the navigation bar, a 2MB video plays before it ultimately goes to it's target destination. The issue is that while the 9MB video loads seamlessly, the 2 MB ones lag behind and the full video doesn't play before it goes to the other page. I even have it so that there is a delay before it switches to the other page via jQuery, so the video can finish.
Is the lag caused by the fact that the videos need to load fully and my ISP isn't fast enough, or is there a way to actually speed them up? I am fairly certain that the answer is the former, but I am just wanting to make sure.
http://www.brokenrecordsaustin.com/test/
Click on "Us" to see what I mean.
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?
My basic problem: Having an html5 video (or else, just needs to be a video) played in a loop on an iPad Device. As soon as someone touches it, an InVision Prototype should be displayed.
In addition the loading time of the InVision Prototype should be as fast as possible (in the best case the user does not even recognize it's InVision).
What i learned so far:
InVision does not allow Videos.
Loading InVision in an iFrame and displaying the Video above it until it was clicked, does not work out, since InVision seems to forcibly forward the user within the prototype which leads to forwarding the top level navigation (so the browser displaying the html file with the video and the iFrame).
Using the sandbox attribute to prohibit forwarding works out - but results in the prototype not working anymore. (Loading won't complete).
Just forwarding the User to InVision as soon as the Video is clicked works out - but then the prototype is loaded which takes at least around 20s, crushing the users experience.
Besides the obvious of "not using InVision" any clever hacks out there?
I just recreated a prototype with roundabout 100 screens in Proto.io, having the video in front. Works like a charm.
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 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.
If I embed a video demonstrating my application in my home page, will it slow down the page to a considerable amount?
I tried, and checked that it takes almost 1 sec, to load the preview of the video.
And as the video stream will not be downloaded until, the video is clicked, the total video do not have to get downloaded.
Is it recommended to embed a video in the home page? Or should I just keep it in a different page and put a link in the home page.
If you are embedding a flash flv video then yes, it could slow the page load down. This is because the page will need to load the flash plugin in order to get the content size, etc and render the initial frame etc.
Doesn't mean it's a bad thing though. It won't be an extreme slowdown (flash is pretty highly optimised nowadays), so instead evaluate on how it looks rather than performance unless you are trying to eke out every dreg of performance on your page load :)
Here one way you can have your cake and eat it too:
Don't put the flash player on the page that you will load by default....
Put in an image that looks like the player instead (it should be much lighter) .
If / when your user clicks on the player image, load in the flash player and play.
Every object you add to a page can slow down the page's loading time. In general don't include anything if the load time isn't worth the added benefit of having that item.
That being said, you can optimize the page by doing some tricks so that the page renders and THEN the flash video loads. You could pre-generate a thumbnail of the flash player/video and put it on the page in the same place as the video, then on page load use javascript (jquery: $(document).ready()) to create the flash object. This may improve the perceived performance. Even better, you could defer loading the video until the user clicks a button or something.
Everything you embed will slow down the page's initial load.
You have several options: (A) embed the video in its native format (mpeg, avi, etc) or (B) convert it into Flash. A good thing about flash is that it's near universal and highly optimized, so loading the flash plugin takes little time.
The whole video needn't load for the page to finish loading (only the player), so if we're just talking about 1 video, it would make sense to embed it in the page so as to provide a better user experience.
Have a look at both of Mr. Shiny and New's points. They're valid as well.