These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:12 pm Advanced search

video breaks when I position a div over it in Chrome

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

video breaks when I position a div over it in Chrome

Postby attaboy123 » Fri Sep 21, 2012 5:18 pm

chrome.png
video in chrome
chrome.png (5.73 KiB) Viewed 10658 times
ff.jpg
video in firefox
ff.jpg (59.18 KiB) Viewed 10658 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>
attaboy123
<h6>
 
Posts: 5
Joined: Thu Jun 28, 2012 11:57 pm

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

Postby 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:
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA

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

Postby 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.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

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

Postby 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?
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

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

Postby 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/.
attaboy123
<h6>
 
Posts: 5
Joined: Thu Jun 28, 2012 11:57 pm

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

Postby zcorpan » Mon Sep 24, 2012 10:10 am

It seems to work for me in Opera and Firefox.

Have you tried Miro?
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

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

Postby 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.
attaboy123
<h6>
 
Posts: 5
Joined: Thu Jun 28, 2012 11:57 pm

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

Postby 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?
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

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

Postby attaboy123 » Thu Sep 27, 2012 6:28 am

WebM is an option in Fireogg
attaboy123
<h6>
 
Posts: 5
Joined: Thu Jun 28, 2012 11:57 pm


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 1 guest