MozillaZine

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

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
jeport
 
Posts: 2
Joined: March 2nd, 2010, 9:14 pm

Post Posted March 2nd, 2010, 9:21 pm

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
 
Posts: 65
Joined: September 13th, 2007, 11:17 am

Post Posted March 3rd, 2010, 2:18 am

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

User avatar
 
Posts: 2097
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted March 3rd, 2010, 3:56 am

Apparently Opera and Chromium play it despite a text/plain header.
Intelligent alien life does exist, otherwise they would have contacted us.

dickvl

User avatar
 
Posts: 52101
Joined: July 18th, 2005, 3:25 am

Post Posted March 3rd, 2010, 11:23 am

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
 
Posts: 2
Joined: March 2nd, 2010, 9:14 pm

Post Posted March 8th, 2010, 6:03 pm

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)
Last edited by jeport on March 8th, 2010, 9:38 pm, edited 1 time in total.

peter.reisio

User avatar
 
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm

Post Posted March 8th, 2010, 6:22 pm

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

gphoto
 
Posts: 3
Joined: June 10th, 2010, 11:34 am

Post Posted June 10th, 2010, 12:22 pm

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

User avatar
 
Posts: 10051
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted June 10th, 2010, 1:26 pm

gphoto wrote: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
 
Posts: 3
Joined: June 10th, 2010, 11:34 am

Post Posted June 10th, 2010, 2:34 pm

-->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

User avatar
 
Posts: 52101
Joined: July 18th, 2005, 3:25 am

Post Posted June 10th, 2010, 2:51 pm

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
 
Posts: 3
Joined: June 10th, 2010, 11:34 am

Post Posted June 10th, 2010, 3:21 pm

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

User avatar
 
Posts: 10051
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted June 10th, 2010, 4:12 pm

gphoto wrote: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
 
Posts: 3
Joined: June 29th, 2010, 6:09 pm

Post Posted June 29th, 2010, 6:24 pm

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

User avatar
 
Posts: 52101
Joined: July 18th, 2005, 3:25 am

Post Posted June 29th, 2010, 10:54 pm

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
 
Posts: 3
Joined: June 29th, 2010, 6:09 pm

Post Posted June 30th, 2010, 12:28 pm

dickvl wrote: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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest