OGV what??? Universal Platform Publishing for Video

Tech, Life and Ramblings

Today people have soooooo many ways to see your multimedia/videos/photofilms.

It is truly great to be able to show our content to our clients and potential clients on so many platforms through the internet. Unfortunately, the average photographer or film maker is not web intelligent which is why so many of them have flash websites which are expensive but easy to use.

What is the problem with this? Well if you haven’t seen the trend, people have decided that mobile viewers like iPad, HTC and iPhones are another way they want to look a content. For example my website has more and more viewers that are using an iPad or iPhone. Last month for example I had 113 people look at my blog and website with an iPhone or iPad.

So why is flash bad? Well if you didn’t know this the iPad and iPhone can’t and will never will see flash and Android based phones do a very poor job at letting you use flash.

So it seems that when you embed your videos with the standard flash based embedding, clients that want to look at your work will be missing out.

Do not be glum my friends. Let there be joy in the world. Some smart people got together and have fixed the problem in HTML 5.

So how do you take advantage of this HTML 5 and be able to show your videos across every platform known to man? Well you have a couple of options.

#1) Use Vimeo Plus which is $60 a year. Sweet deal.

#2) Use free Vimeo (or YouTube) and embed multiple video inputs for every platform out there and host the HTML 5 compatible videos on your own server.

Wait what? Embed multiple video inputs? Sounds like a lot of work.

Well no.

There is a very simple way to do this and i’m going to show you step by step.

#1) First you should use Firefox and add the plug-in Firefogg. Firefogg will help you convert your movie into the HTML5 complaint .ogv video file which is needed to for Firefox viewers.

#2) You can read about all the settings for Firefogg here but most of the time using the Preset in Firefogg does the job well. Just make sure you choose the option that has “Theora(video) and Vorbis(audio)”. ( I just found out that Firfogg can also encode your videos in Google’s new format called WebM. Very nice!)

#3) Now you will get a .ogv file. keep it.

#4) Now download another free program called MPEG Streamclip. Open up this application and go to “Export MPEG-4”

#5) Convert your original video file into a mp4 using h.264 or x.264.

#6) Upload your 2 video files (.ogv and .mp4) via FTP to your server.  Make it easy for yourself and make a folder called “Video” where you will put all these files. Make sure you know the file path on your server (http://www.yoursite.com/Videos/Name_of_your_Video.mp4).

#7) Upload your .mp4 video to Vimeo or YouTube.

#8) Open your web-page (with your web editor) or wordpress (Post -> HTML) and paste the following code. Make sure you change the file names and locations and read the directions below.

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise       -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fix coming from Apple in OS4.0  -->

<video width="768" height="432" controls autobuffer>  <!-- You can make this any size as long as you encode in that size and it has the same aspect ratio as your original video -->
<source src="../Videos/YOUR_VIDEO_NAME.mp4"  type="video/mp4" />  <!-- change your video name and location -->
<source src="../Videos/YOUR_VIDEO_NAME.ogv"  type="video/ogg" />  <!-- change your video name and location -->

<!-- fallback to Flash: this is the embedding code that YouTube or Vimeo gives you -->
<object width="768" height="432"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12816435&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12816435&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="768" height="432"></embed></object>

This last bit of code is your embedding code that Vimeo or YouTube gives you. This is flash and it is needed for all those poor souls that are still using Internet Explorer or haven’t updated their browser.

Well there you go. Now everyone can watch your great video work on any platform whether it is a computer, iPhone, iPad or Droid. By using this way of publishing your videos on your website you are publishing it for the future and for those people who are still using old browsers.

Now this embedding code is not my creation entirely. I modified it to use embedding code for Vimeo and YouTube from  Kroc Camen.  Without his help I would be as lost as you. So if you want to know more about HTML 5 from a super genius web guy go check out his site here: http://camendesign.com/code/video_for_everybody.

Now after all my talk were is my example?? Well here you go sparky!! This is my published HTML 5 video example for you from a recent project I worked on. Go ahead and right click on the video. No adobe and no flash (unless your on Internet Explorer 😉 ). Ahhhhhh so nice!!!

Also, so you don’t freak out about the video interface for different browsers. Each browser has their own different video interface.




Google Chrome

Google Chrome

Google Chrome




Well you get the idea. The important thing is that your clients can now watch your work on any platform they want to. It is all about accessibility.

Happy publishing!!