video breaks when I position a div over it in Chrome

by **attaboy123** » Fri Sep 21, 2012 5:18 pm

: video in chrome; chrome.png (5.73 KiB) Viewed 10652 times

: video in firefox; ff.jpg (59.18 KiB) Viewed 10652 times

This is my html:

Code: Select all: <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>video stuff</title> <style type="text/css"> #menu { position:absolute; top:30px; left:10px; height:100px; width:100px; } </style> </head> <body> <video width="320" height="240" controls="controls"> <source src="baloons.mp4" type="video/mp4"> <source src="baloons.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <div id="menu"> <h1>menu</h1> </div> </body> </html>

by **JAB Creations** » Sat Sep 22, 2012 3:21 am

In Firefox (at least) object elements aren't displayed unless they are given at least a min-height and min-width of at least 1px by 1px; the same may be the case with WebKit for the video element. Make sure there is an explicit height and width (though it is not intuitive to require any height or width since media has it's own self-defined dimensions like images in example) and if that doesn't work make sure that you're not getting a 404 in your Apache access log. Also if you're going to serve proprietary non-standard video formats they should be alternatives to standard codecs so load the OGG file first.

PS XAMPP FTW! :wink:

by **zcorpan** » Sat Sep 22, 2012 8:12 am

JAB Creations wrote:In Firefox (at least) object elements aren't displayed unless they are given at least a min-height and min-width of at least 1px by 1px;

Do you have an example URL showing this?

JAB Creations wrote:the same may be the case with WebKit for the video element.

No...

JAB Creations wrote:if that doesn't work make sure that you're not getting a 404 in your Apache access log.

Since the ogg video loads in Firefox, it should load in Chrome as well even if the mp4 is 404.

JAB Creations wrote:Also if you're going to serve proprietary non-standard video formats they should be alternatives to standard codecs so load the OGG file first.

Then it doesn't work in old iPhones.

by **zcorpan** » Sat Sep 22, 2012 8:14 am

You code works for me in Chrome (23 dev). Are you sure it has anything to do with the positioning of the div? That seems unlikely to me. Do you have your video files online?

by **attaboy123** » Sat Sep 22, 2012 4:51 pm

This morning it works I don't know why I do know I've been trying out different video converters and possibly I replaced the mp4 with one I created with wondershare converter but I think I was already using that. Now I have a new problem, I put this code on the web http://www.jimslounge.com/div_over_video/ and it only works on safari and chrome though it works on all when running on localhost. I don't know for sure if it makes a difference what video conversion software I use. Do either of you have a recommended video conversion software that doesn't cost hundreds of dollars? What I want to do eventually is to write sites like this one I wrote in flash http://droolpigs.com/.

by **zcorpan** » Mon Sep 24, 2012 10:10 am

It seems to work for me in Opera and Firefox.

Have you tried Miro?

by **attaboy123** » Mon Sep 24, 2012 4:59 pm

I've tried Miro but when converting from AVI (a format with little compression) it makes even larger files. Fireogg isn't too bad.

by **zcorpan** » Tue Sep 25, 2012 7:45 am

What did you select in Miro? IIRC, for MP4, the right option for the Web is "iPhone"

Why do you convert to Ogg/Theora rather than WebM?

by **attaboy123** » Thu Sep 27, 2012 6:28 am

WebM is an option in Fireogg

video breaks when I position a div over it in Chrome

video breaks when I position a div over it in Chrome

Re: video breaks when I position a div over it in Chrome

Re: video breaks when I position a div over it in Chrome

Re: video breaks when I position a div over it in Chrome

Re: video breaks when I position a div over it in Chrome

Re: video breaks when I position a div over it in Chrome

Re: video breaks when I position a div over it in Chrome

Re: video breaks when I position a div over it in Chrome

Re: video breaks when I position a div over it in Chrome

Who is online

Who is online