For the past 6 or 7 months, I’ve attempted to provide video to all types of platforms by encoding videos in both H.264 and WebM. WebM is the encoder of choice for Firefox, Chrome etc in other words “not-Apple” (though Microsoft has thrown in with Apple on H.264). I haven’t had much success. Most of the time, I was not able to play WebM encoded video in Firefox nor Chrome and it was an additional step in my workstream.
Over the weekend, I did two things; I re-encoded all of the videos using the x264 encoder and I deleted all of the WebM video. Hopefully, this hasn’t caused too many issues with my viewing public. Please contact me via the Contact page if so.
A coupe of quick notes:
1) I used x264 in Compressor by adding the x264 component to the Quicktime components in Library. Larry Jordan has a nice explanation of how to do this.
2) For most of the HD videos, I created half-size videos then upscaled them on playback. This results in a moderately small file size with nice quality.
3) The trick on using Compressor is to follow Larry’s advice of creating .mov files which is a Quicktime container. Most browsers will play a Quicktime container but my Nexus 7 had a problem. The key is to use Quicktime 7 to convert it from .mov to .mp4. Larry states one can do this without re-encoding but fails to advise how.
There is a “pass through” option when using “File -> Export -> Convert Movie to MPEG-4”. This will simply copy the file from .mov format to .mp4 format without re-encoding. Click on Options on the Save window and select MP4 from the drop down menu at the top of the box and click on the Video button right below the dropdown. Below the Video button is another dropdown and on this one, select Pass through. Click OK and Bob’s your Uncle, you will have a file that has broader compatibility than the Quicktime container, .mov.
I’m interested in what HTML5/CSS3 are bringing to the Web. A simple thing like using CSS to drop shadow an image is Â quite nice. Beats having to use Photoshop…
Based on the drop shadow alone, I thought it would be good to begin using these two new web standards, So I changed my photography site Stills from one using a Lightroom HTML template to one of my own implemented with HTML5 and CSS3.
For now it is quite rudimentary, it shows photos in a classic gallery style with little changes from a conventional HTML/CSS 2.1 site. As I have more time, I will use tools like Modernizer to help ensure viewers have a good experience regardless of browser.
I’ll also incorporate the database approach I used for my film site. Currently, I have a “hand-crafted” site which requires a new html page for every new photo. After a few photos, the overhead gets to be quite a pain.
I seem to be in “tweaking” mode…
After changing the site from hand-coded to database driven and getting feedback from Feedback Army (highly recommended), I’m adding salt and throwing in pepper.
A good comment from the Feedback Army was suggesting adding time of movie under each image. Good idea. Done. BTW – a very good reference on CSS is CSS Mastery by Andy Budd. Highly recommended.
Another comment was to add a bit more on the About/Contact page. Done.
Other comments… “go to Flash”.. Fuggedaboutit! “Group your videos”… not needed. “commercialize the site”… yeah, right, I’ll get right on that.
A extremely helpful service from Feedback Army is the ability to ask for feedback from a number of users. The cost is low, typically $1 per user and the advice from my limited sample of 1 time was well-worth the cost.
I wanted to know if my wellys.com site was intuitive and easy to use. Yes, quite easy was the feedback.
Was the performance acceptable? Yes, no issues.
What should I change? Very little.
So two thoughts, one, I’m happy I have no issues and two, am I happy with the feedback because I have no issues? Probably.
I did receive feedback that I won’t take. Such as adding Flash for playback because Quicktime is “an old format now” and “not a format of the masses”. Good point and I’m not interested in the masses, thank you very much.
The feedback was quick. I had responses in less than 10 minutes and within 1 hour, I had 5 helpful responses.
PS: Read the FAQ and the Usability sections, both are well-written and help you to gain the best results.
In my continuing efforts to learn web programming, simplify things and make a better site, I changed the site (again). This time I switched from a manual, hand-coded implementation to a SQL-based version. The new version uses a database to display the movies, making adding a new movie much easier and more intuitive.
And it was a lot of fun to see if I could do it!
With any luck, there shouldn’t be any obvious differences with my old site. The new site allows me to create a web page for each movie explaining in greater detail all aspects.
More to come!