Video from Pinnacle Studio to HTML5
I have spent a ridiculous time getting video on my website. Previously I used Windows Media Player embedded in the html and this worked ok but needs a plugin for anything other than IE. So with the advent of HTML5 I decided to get the video tag to work.
After a lot of messing about trying to get IE9 to play MPEG-4 files I found a combination that actually worked. I'm not sure if this is specific to my host provider or it would apply to anyone else but I fould no info out in the ether on it.
The main problem seemed to be with MPEG containers. The video must be H.264 and audio AAC wrapped up in an MP4 container. But there seems to be various MP4 container bits and bobs and only one configuration worked for me.
So these are the steps I took.
- After hours of editing... Make file from Pinnacle Studio video type MPEG-4 using preset HD1080p
The resulting MP4, even if made small, did not work when played from my web site although it played locally fine.
GSpot shows the container as this...
- Now obviously the Pinnacle movie is too large and did not play anyway, but it's great for best quality at home on the media server.
Using MPEGStreamClip v1.2.1b5 load the HD MPEG generated above to create a reduced version.
(I had to turn off the settings for quicktime directX directdraw acceleration, go to quicktime on the control panel, to stop it hanging.)
Export MPEG using default settings with size set to 380x220 and quality set to 20% (this seemed reasonable to me).
This gives the following container that worked from my website.
- Next you need to generate ogv and webm formats so that other HTML5 browsers will work. Firefox etc.
I use Miro Video Converter that does a reasonable job at the click of a botton.
If you try to create an MPEG here then it creates the following container that also didn't work for me.
Don't forget the DOCTYPE in the html file as this makes a difference.
Also the MIME types in the .htaccess file.
Below is a sample html page with video tag construct as found all over the web!
Hope this has been helpful to someone!