I’m in need of an advice. I’m designing a figure drawing website which will supply video lectures on how to approach figure drawing. I’m getting close to have it ready now with two lectures ready to go. The site has no live sales links yet as I am working out the membership and secure delivery download links elsewhere. I have uploaded the site the first time in this shape yesterday ( www.figuredrawingonline.com ) and noticed to my dismay how long the 3 intro videos take to load.
They are between 12 and 15 MB each (around 4.5 minutes long so I can’t do much else in terms of compression to reduce the file size) and take forever to load when you visit the site. I don’t want “too hard” to be the first impression.
I’m using the standard Freeway issue FLV Player to show the videos and I’m using a small JPEG for the poster frame. I thought that is what would load fast and then if you want to watch one of these, the video itself will load on request, rather than by default.
Is there a way, other than having four versions of the “index.html” page – one with jpegs only, one with 2 jpegs and one movie, one with…
If not, is there a way to show at least a spinning cog kind of a “I’m doing something here, this is not a mistake” message?
Are these videos on the Home page? I ask because there isn’t anything obvious.
If so then that is your first mistake - foisting slow load content on the unsuspecting. Folk are far more tolerant of load times when they have actually requested something like this.
Put them on separate page(s) and tell them that is what they are linking to.
You can quite simply create a graphic layer that will sit beneath the Video layer with a loading graphic in it. This will only be displayed until the video loads.
that looks nice. I just downloaded the HTML5 Video action from ActionsForge and am looking into it.
The clips I need to have on the site are edited in FCP7, exported as .mov and then compressed down in Handbrake to get the best quality / compression ratio. They both support the fast Start feature, I just never used it (banging his head against the wall). Re-encoding now.
Download this one then just select the HTML 5 Video container and in the Inspector under the Paintbrush Icon choose this file as the Background image with Horizontal: Center and Vertical: Center
Any reason why you don’t use Vimeo to process, host and stream the videos into your pages? You can lock them so they can only be seen where you allow, and everything’s fine-tuned for best end user experience. Also, the videos don’t load until clicked, then they stream. So no slow-loading pages for people just browsing.
could you cast an eye on the HTML5 Video action I used (www.figuredrawingonline.com), I did the appropriate Ogg Theora conversion for Firefox – actually Firefox did it for me (the file extension ended up being .ogv), but the thing will not play in Firefox.
The loading time and playing straight away in Safari works like magic, but not in Firefox.
