[HTML] Video im Hintergrund einbinden

SidDasFaultier · 24. Oktober 2012

Video im Hintergrund einbinden

Hey Rushler,

ich habe vor eine Website die für 1024px Breite optimiert ist umzusetzen.
Nun möchte ich ein kurzes Video drehen und das dann in den Hintergrund einbinden, zusätzlich soll sich das Video je nach Browserfenstergröße 100% anpassen.

Meine Frage:

Hat das jemand von euch schon mal umgesetzt?
Was ist beim Video zu beachten in Hinsicht auf Dreh, Qualität usw.?
Wie setzte ich das am besten mit CSS um? (Einen DIV in den Hintergrund legen, absolut positionieren und bei den Größenangaben 100% und dem Video auch die Größe 100 % geben?)
Was ist mit den Ladezeiten?

Ich freue mich auf euer Feedback!

Anzeige

onip · 24. Oktober 2012

AW: Video im Hintergrund einbinden

hi,

1. nein, aber google ist echt ein guter freund [g]video as background[/g]
2. ist ermessenssache
3.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Unbenannt</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}
#videobg {
 position: fixed;
 z-index: 0; 
 top: 0px; 
 left: 0px; 
 height: 100%; 
 width: 100%; 
 opacity: 1; 
 overflow: hidden;
}
video{
 position: absolute; 
 z-index: 0; 
 top: 0px; 
 left: 0px; 
 min-width: 100%; 
 min-height: 100%;
}
</style>
</head>

<body>

<div id="videobg">
 <video poster="http://syddev.com/jquery.videoBG/assets/christmas_snow.jpg" autoplay="" src="http://syddev.com/jquery.videoBG/assets/christmas_snow.webm" tabindex="0"></video>
</div>

</body>
</html>

4. wird abgespielt wenn geladen, sonst poster. sieh dir den video-tag an.

viel erfolg

// edit
geht auch mit bilder

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Unbenannt</title>
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}
.bg {
 position: fixed;
 z-index: 0; 
 top: 0px; 
 left: 0px; 
 height: 100%; 
 width: 50%; 
 opacity: 1; 
 overflow: hidden;
}
.bg + .bg {
 left: 50%;
}
.bgel{
 position: absolute; 
 z-index: 0; 
 top: 0px; 
 left: 0px; 
 min-width: 100%; 
 min-height: 100%;
}
</style>
</head>

<body>

<div class="bg">
 <video class="bgel" poster="http://syddev.com/jquery.videoBG/assets/christmas_snow.jpg" autoplay="" src="http://syddev.com/jquery.videoBG/assets/christmas_snow.webm" tabindex="0"></video>
</div>
<div class="bg">
 <img class="bgel" src="http://syddev.com/jquery.videoBG/assets/christmas_snow.jpg" />
</div>

</body>
</html>

BlueSin · 25. Oktober 2012

AW: Video im Hintergrund einbinden

Ich persönlich würde davon abraten.
Wenn du ein Bild haben möchtest dann binde eines ein.
Am besten finde ich Farbverläufe (Geht nicht so auf die Ladezeit)

Ein Video würde ich generell extern hosten (YouTube), um die Ladezeit zu minimieren.
Bilder/Videos als Hintergrund sind relativ schwer, da du nie weist, in welcher Dimension die Browser sind.
Monitorauflösung, Browser-Fenstergröße, anzahl der extra Leisten (Toolbars, etc.) usw.

Du wirst es selten darstellen können, ohne dass es verzehrt.

Eine Möglichkeit wäre dies hier (Viva.tv).
Ein Bild im Hintergrund, welches ~3000px Breit ist und nicht mitscrollt.
Nur muss dass Bild auch passen, da größtenteils nur ein Ausschnit angezeigt wird.

Bei Videos stell ich mir dass noch kompliziert vor.
Wobei YouTube die Auflösung (mittels schwarze Balken am Rand) teils selbst löst.
Nur sieht es dann nicht mehr so gut aus.

PS: Von Ladezeiten möchte ich erst gar nicht anfangen.
Große Auflösung -> Qualität des Videos/Bildes muss gut sein (Damit es nicht verpixelt) -> große Dateien -> lange Ladezeit.

Und wenn, beim betreten einer Seite ein Video (welches ich nicht erwarte) anfängt oder gar Musik, verlassen die meisten die Seite sofort.

Außerdem: Was bringt ein Video im Hintergrund, wenn die restliche Seite davor ist und den Blick versperrt?

SidDasFaultier · 25. Oktober 2012

AW: Video im Hintergrund einbinden

Im Video soll ja auch nichts weiter passieren und Musik schon mal gleich gar nicht

Sondern du kannst es dir so vorstellen das z.B. ein kleiner Sandhaufen angezeigt wird und dann etwas sand herabrieselt und der Haufen größer wird. Es soll einfach nur ein bisschen etwas passieren und nicht ein Image-Filmche oder ähnliches ablaufen. Das ist mir klar das es dann zuviel wird und die meisten die Seite wieder verlassen^^

onip · 25. Oktober 2012

AW: Video im Hintergrund einbinden

ich denke auch das man die seite etwas aufwerten kann mit guten hintergrund filmchen.
z.b.

der nachteil wäre aus meiner sicht, das der user vom wesentlichen abgelegt wird
und das ist der content.

Nanobyte · 25. Oktober 2012

AW: Video im Hintergrund einbinden

Deine Lösung wird wohl BigVideo.js heißen

Nützliche Suchen

[HTML] Video im Hintergrund einbinden

Videos zum Themenbereich