HTML5 video [solved]

[DJ]

So I'm trying to implement HTML5 video on my new site that falls back to Flash if HTML5 isn't supported.
The problem appears to be that it doesn't work with any script I've tried.

I'm sticking with this one:
http://videojs.com/

The test video streams just fine from their server. When I copy the test videos to my server they don't work.
I've created a .htaccess include on my server to try and get it working. No joy though.
The closest I've got is this in Safari 5:
http://www.blatant-self-promotion.co.uk/test4.html

If anyone fancies trying this script on their server and seeing if it works by all means, it'd be a huge help.
I'm pointing the finger at my host for not allowing streaming, but if anyone has ideas I'd love to hear them please.

I'd I need to host the videos elsewhere, can anyone recommend a free host that will allow me to stream my videos?

Thanks.

[Blak]

Go have a read of the HTML5 Video thread for a bit of info on the drama surrounding Video bits and the need for fallbacks.

You appear to currently be dicking around with the page so I can't give you a juicy lowdown of what's working / not.

But the problem is most likely that you .ogg file is an OGG Vorbis audio file, not an OGG Theora Video so the servers are going "wtf?".

[DJ]

Thanks for taking a look mate. I'm not dicking around with those pages anymore, I just make a new test HTML page and leave the old one there, so nothing will change.
The ogg files are indeed Theora files, not audio.
I'll take a read of that thread and see if anything leaps out at me.
But I'm going try hosting the videos elsewhere if I can find a host that'll allow me to stream from them.

This is really holding back my project it's so annoying! I could just dump Vimeo on the site or use Lightbox even, but as it's a portfolio site I'd rather implemet HTML5 as it'll look better for me at interviews and such. I reckon.

[Blak]

From what I can see:

IE8 works, so the flash fallback is fine.
Chrome works so mp4 is fine.
Opera and FF don't work so it's choking on the Ogg file
You don't need webm, as mp4 / ogg cover all the bases.

I still reckon you've got a duff .ogg. Try grabbing an alternative from somewhere. Here's the clip from the videojs site

Adding a .htaccess file won't do anything as according to the response headers your server is IIS not Apache.

[DJ]

Nice one thanks for looking.
I've re-uploaded that ogg file you linked to, so now all the ocean-clips from their server are on my server now.
http://www.blatant-self-promotion.co.uk/test3.html
Opera now works in a fashion, Firefox still does nothing. Might just be me though...?

One thing I do notice is that the ogg file of that ocean-clip is 50% smaller than the mp4.
Yet when I've encoded the ogg file, it's been a 6th of the filesize of the original, loads smaller.
I've tried Miro Video Converter, VLC, and even tried windows FreeWebEncoder and got the same result.
Hard to imagine I know, but... am I doing something wrong...?

[Blak]

This chap claims FF doesn't like it if the video files aren't served with the correct mime type, which your web server isn't doing (or at least wasn't last night, now I'm getting a 404 error for the .ogg). This might be because .ogg files could be either audio or video. Try changing your file extension to .ogv as this is unambiguously a video file (and .oga for Ogg audio).

If that doesn't work then you'll need to whinge to your hosting provider about adding the correct mime type for .ogv files.

[DJ]

http://www.blatant-self-promotion.co.uk/test7.html

That's serving a .ogv, the file is definitely on the server and I can download it, yet it doesn't play.
That link is where I got the .htaccess idea from, but if you're saying that won't make any difference because of the server type then I'm screwed either way on this server by the looks of it.

There's a new version of the script that does automatic fallback to Flash if only mp4 is served:
http://www.blatant-self-promotion.co.uk/demo3.html
And it still doesn't work in Firefox using the video from this server, and performance is hit n miss on other browsers.
So in conclusion, the server is why this script doesn't work and my hosting is shite.

Thanks for your help mate. I'm looking for new hosting to fix this.

[DJ]

Behold, working HTML5 video! http://www.blatant-self-promotion.co.uk/demo4.html
Just need to sort out the placeholder image, size, and drop it on my site.
Thanks to Blak troubleshooting, the hosting was isolated as the culprit and the script works ace.

For anyone else looking at using HTML5 video on their projects, I'm using the script from http://videojs.com/
My .ogg/.ogv video files (and probably the .mp4 as well depending on how things go) are hosted on http://videobin.org
I've no idea who they are or how they do it, but it works great from what I can tell at this early stage.

No go forth and make HTML5 videoses pages, all of you! Now!