Überlagerung zweier DIVs (Video und transparentes gif) @ tutorials.de: Tutorials, Forum & Hilfe

Fenghuang · 08.08.11 20:37

Hallo,

durch einer Überlagerung zweier Divs möchte ich einem Video einen Rahmen (transparentes gif) verleihen.
Leider funktioniert es nicht, das Video ist immer im Vordergrund.
Hier mal der Code...

html

Code :

<div id="bottom">
    <div id="picture">
        <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="430" width="500">
            <param name="src" value="video.avi">
            <param name="autoplay" value="true">
            <param name="target" value="myself">
            <param name="controller" value="false">
            <param name="type" value="video/quicktime" height="430" width="500">
            
            <embed src="video.avi" height="430" width="500" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" controller="false" target="myself"></embed>
        </object>
    </div> <!--end div picture -->
    <div id="rahmen">
        <img src="rahmen.gif" alt=""/>
    </div>
    <div id="content">
        <h1>Überschrift</h1>
        <p>Text</p>
    </div><!--end div content -->
</div> <!--end div bottom -->

CSS

Code :

#bottom{
    width:1000px;
    height: 430px;
 
}   
 
#picture{
    z-index:1;
    position:absolute;
    left:0;
    width:500px;
    height:430px;
    margin:0;
}   
 
#rahmen{
    z-index:2;
    position:absolute;
    left:0;
    width:500px;
    height:430px;
}   
 
#content{
    position:absolute;
    left:550px;
    width:450px;
    height:300px;
    margin-top:95px;
    overflow:auto;
}

Schmeiße ich das Video raus und ersetze es durch ein ganz normales Image, funktioniert die Überlagerung einwandfrei.

Hat jemand eine Idee woran das liegen könnte?

Danke für eure Hilfe

Fenghuang

**chmee** · 08.08.11 21:00

Womit wird das video abgespielt? Mit nem quicktime plugin?
Das Problem wird sehr sehr wahrscheinlich am Plugin liegen..

Nicht getestet, aber zum Lesen gefunden:
http://www.codingforums.com/archive/.../t-208556.html
http://stackoverflow.com/questions/4...over-fixed-div

Eine mögliche Lösung:

Code :

1
2
3

<param name="wmode" value="transparent"/>
oder
<object .. wmode="transparent">

mfg chmee

flyAway · 09.08.11 13:12

Danke chmee,

stimmt, ist Quicktime. Lieber wär es mir, das Video so einzibinden, wie es youtube macht, habe aber keine Ahnung wie die das machen.

Dein Tipp funktioniert im IE. Beim FF ist jetzt der Rahmen sichtbar, aber dafür wird kein Videlo mehr angezeigt.

Gruß Fenghuang

**chmee** · 09.08.11 13:54

Dann schau Dir mal die html5-Sachen zu Videos an. Nicht schwerer als sonst

http://en.wikipedia.org/wiki/HTML5_video
Wichtig ist dann aber der Codec.. idR OGG Theora.

mfg chmee

flyAway · 13.08.11 08:04

Danke für dein Tip. Das interessante ist, dass das ganze lokal funktioniert, aber sobald ich es hochspiele nicht mehr.

Code :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5 MediaElement</title>   
    
    <script src="../../media/jquery.js"></script>   
    <script src="../../media/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="../../media/mediaelementplayer.min.css" />
</head>
<body>
 
 
 
<video width="640" height="360" id="player2" poster="../../video/echo.jpg" controls="controls" preload="none">
    <!-- MP4 source must come first for iOS -->
    <source type="video/mp4" src="../../video/echo.mp4" />
    <!-- WebM for Firefox 4 and Opera -->
    <source type="video/webm" src="../../video/echo.webm" />
    <!-- OGG for Firefox 3 -->
    <source type="video/ogg" src="../../video/echo.ogv" />
    <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="../../media/flashmediaelement.swf">         
        <param name="movie" value="../../media/flashmediaelement.swf" /> 
        <param name="flashvars" value="controls=true&amp;file=../../video/echo.mp4" />      
        <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
        <img src="../../video/echo.jpg" width="640" height="360" alt="Here we are" 
            title="No video playback capabilities" />
    </object>   
</video>
 
<span id="player2-mode"></span>
 
<script>
 
$('audio,video').mediaelementplayer({
    success: function(player, node) {
        $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
    }
});
 
</script>
 
</body>
</html>

Selbst die größe des Videos ist am Server anders als lokal.

Woran kann das liegen?

Danke

Fenghuang

flyAway · 13.08.11 13:33

Nachdem das Thema inzwischen nichts mehr mit css zu tun hat, schließe ich mal es mal und starte anderswo ein neues.

Danke für deine Hilfe

Fenghuang

**Markus Kolletzky** · 13.08.11 15:07

Zitat von flyAway

Nachdem das Thema inzwischen nichts mehr mit css zu tun hat, schließe ich mal es mal und starte anderswo ein neues.

Hier drüben gehts weiter.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

überlagerung von Bilder in HP mit Menü

div - Überlagerung im IE

Überlagerung von div auf website + css

Transparentes Control über DirectX Video legen

Verschiedene Schatten bei Überlagerung

E-Mail:

Abonnieren Abbestellen