Video Element (HTML 5) doesn't work using OGV source

[jeport]

I am trying to use the HTML 5 VIDEO element on my website, with an OGV video file source. It does not work. I have tried many variations, and I continue to get the gray box with an "X". The correct MIME types for OGG/OGV were added (according to my web host).

I used FIREFOGG to make the OGV file with Theora encoding. Even back up video sources do not play, have tried object, embed, SWF file, nothing works.
There must be some very simple glitch that I am unaware of...?

This is where the problem is: http://www.jessicaport.com/video.html

[gjb123]

The mime type for ogg video should be video/ogg. The liveheaders addon shows it is being sent with the text/plain mime type (see below). You should add the video/ogg mime type for .ogv file extensions to the htaccess file on your server.

Code: Select all

http://www.jessicaport.com/video/theDeadline.ogv

GET /video/theDeadline.ogv HTTP/1.1
Host: www.jessicaport.com
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.8) Gecko/20100216 Fedora/3.5.8-1.fc12 Firefox/3.5.8
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Range: bytes=0-
Pragma: no-cache
Cache-Control: no-cache

HTTP/1.1 206 Partial Content
Date: Wed, 03 Mar 2010 08:58:02 GMT
Server: Apache/1.3.28 (Win32)
Last-Modified: Mon, 01 Mar 2010 19:47:53 GMT
Etag: "0-44f713-4b8c19e9"
Accept-Ranges: bytes
Content-Length: 4519699
Content-Range: bytes 0-4519698/4519699
Keep-Alive: timeout=15, max=9999
Connection: Keep-Alive
Content-Type: text/plain

[Frenzie]

Apparently Opera and Chromium play it despite a text/plain header.

[dickvl]

Works for me if I download and save the file theDeadline.ogv and drag the file in a Firefox window, so the file is not the problem.

In addition to the above see http://developer.mozilla.org/en/docs/Pr ... MIME_Types

[jeport]

PROBLEM SOLVED.

Hosting serving had told me I was on an old server with no access to add MIME types on my own, I then had to upgrade to the "new" server to add the correct video/ogg mime type.

(then made a stupidly simple error by not re-uploading my video folder which caused it to not work– problem fixed now)

[peter.reisio]

The video file isn't even there at this point — either that or it's being redirected elsewhere.

[gphoto]

I am having the same trouble. I have installed an .htaccess file with AddType video/ogg ogv and have confirmed that the server is sending Content-type: video/ogg by using Live HTTP Headers. I can also play the video by opening it in a new Firefox window, so the file seems to be fine. I'm guessing the problem lies in my HTML, which I copied from a WebMonkey tutorial. Here's my HTML:

<video width="320" height="240" controls>
<source src="/imgs/toddtv/video/letterfromryan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="/imgs/toddtv/video/letterfromryan.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object width="320" height="240" type="application/x-shockwave-flash"
        data="/imgs/toddtv/player.swf?image=placeholder.jpg&file=/imgs/toddtv/video/letterfromryan.mp4">
        <param name="movie" value="/imgs/toddtv/player.swf?image=placeholder.jpg&file=/imgs/toddtv/video/letterfromryan.mp4" />
    </object>
</video>

It works great in Safari, BTW.

[jscher2000]

I'm guessing the problem lies in my HTML, which I copied from a WebMonkey tutorial.

What if you change the order of the <source> tags?

== Edit ==

Or... seems you might need to change that <source> tag to:

Code: Select all

<source src="/imgs/toddtv/video/letterfromryan.ogv" type="video/ogg">

See: source element on MDC and Bug 449363 – Support media attribute of <source> elements.

[gphoto]

-->jscher2000

I had tried reordering the <source> tags and that didn't work. I also read that the iPad/phone require the mp4 first.

I just tried modifying the source tag as you suggested and still no go.

I also tried variations on the DOCTYPE header:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

and

<!DOCTYPE HTML>

...but no good.

Just looked at the links you posted and I'm not sure what to make of them. Does this mean the <source> and <type> tags aren't really supported?

[dickvl]

Did you try to remove the codecs attribute?

Can you post a link, then we can check the code and test why it doesn't work?

See also https://developer.mozilla.org/En/Using_ ... in_Firefox

[gphoto]

It seems to be working now and I don't know why (or more accurately, why it wasn't before). I tried removing the codecs attribute and reordering the <source> tags, putting ogg first, and it started to work. I then reverted back to my original HTML and it still works. I would appreciate anyone who would like to test and confirm, however, since I only have Macs here to test with. Here's a link:

http://www.toddparr.com/toddtv/test.html

Thank you!

[jscher2000]

I would appreciate anyone who would like to test and confirm, however, since I only have Macs here to test with.

That would not be my favorite pizza.

[GusDoeMatik]

I'm having the same issue. I rewrote the code different ways and it just doesn't seem to work on FireFox... Safari it's all good.. but Firefox and Opera a no no.. can anyone help me please here's a link to the site. http://elpadrinoent.com/accordian.html

I even downloaded Mr. Todd Parr's video and put it in the directory and still no luck. I did notice how ever if I use an external video, meaning a video say on Mr.Todds website it works but not a video on my website. How do I fix that?
Is Javascript necessary?

[dickvl]

Your server sends the .ogg and .ogv files as text/plain
http://web-sniffer.net/?url=%22http%3A% ... HEAD&uak=0

http://www.toddparr.com/imgs/toddtv/vid ... omryan.ogv is send with the correct video/ogg content type and works

See http://developer.mozilla.org/en/docs/Pr ... MIME_Types

[GusDoeMatik]

Your server sends the .ogg and .ogv files as text/plain
http://web-sniffer.net/?url=%22http%3A% ... HEAD&uak=0

http://www.toddparr.com/imgs/toddtv/vid ... omryan.ogv is send with the correct video/ogg content type and works

See http://developer.mozilla.org/en/docs/Pr ... MIME_Types

Thank you.. but I'm an idiot... I don't really understand how to properly change the .htaccess file to make it understand ogv. Do I just add this bit of code to make it work?

Code: Select all

# OGV files
AddType video/ogg .ogv

# OGG files
AddType audio/ogg .ogg

# OGG files
AddType video/ogg .ogg

If this is not the proper code for me to add could you please tell me what I should add. I will try this code now and post back in a few to tell you if it worked or not. Thank you.