html5 Video im (Hintergrund)Bild

tiborius

Hallo,

ich möchte ein kleines Video im Hintergrundbild einfügen.

Z.B eine Kinoleinwand wo drin das Video läuft. Hat jemand dafür einen html Code oder eine Idee wie ich das machen könnte.

Herzlichen Dank Tiborius

cottton

Naja, Du brauchst ein Hintergrungbild, ein Video und bissl HTML/CSS/CSS3 -Kentnisse.

Hier kannst Du Dir zB bissl was zu html5 video ansehen: http://www.w3schools.com/html/html5_video.asp
^>bsp: http://www.w3schools.com/html/tryit.asp…html5_video_all

Aber als aller erstes brauchst Du wohl einen Server, bei dem Du das testen/laufen lassen kannst.

tiborius

Erst mal schönen Dank fürs antworten.
So weit habe ich schon alles.
Den html Code fürs Video habe ich schon, die Testseite ist auch schon fertig (ich arbeite mit Adobe Dreamweaver), aber ich dachte da gäbe ein html Code wo man das Video im Bild einfügen könnte. (mit css Teil). Ich könnte das mit Flash machen aber es ist zu aufwendig.
Es sollte eine Kopfleiste sein mit Kinoleinwand als Hintergrundbild worin das Video läuft (ca. 10 Sekunden lang)

cottton

Zitat von tiborius

aber ich dachte da gäbe ein html Code wo man das Video im Bild einfügen könnte.

klar, hier:

HTML

<!DOCTYPE html>
<html>
<body>




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>




</body>
</html>

Alles anzeigen

http://www.w3schools.com/html/tryit.asp…html5_video_all

tiborius

Den Code habe ich schon.

Der Film läuft schon. Aber ich brauche einen Code wo ich das Video im Hintergrundbild einfügen kann.
Wenn ich das Bild einfüge <div ><img src="kinoleinwand.jpg" alt="" /></div> drückt das Bild das Video runter, Bild und Video sind untereinander.
Ich möchte ineinander haben.

cottton

nimm background
bsp: http://www.w3schools.com/TAgs/att_body_background.asp

also das div, in dem das video ist, bekommt ein background -> das bild

wolf

HTML

<div id="player-overlay">
<video width="100%" video="100%" style="width:100%, height:100%" id="video" autoplay loop muted>
<source src="video.mp4" />
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>

CSS

#player-overlay{
   background-image: background.png;
}

Ungetestet, weiß nicht ob die Videobox durchsichtig wird..

EDIT: oops, sehe gerade das cotton schon geantwortet hat hatte vorhin die Antwort iwi net abgeschickt

tiborius

Ich danke euch allen für die Hilfe.
Ich habe das Problem gelöst.

wolf

Es gibt auch noch andere Benutzer die evtl. das gleiche Problem haben und sich freuen würden, wenn sie wüssten, WIE du es gelöst hast!

Bitte poste das oder schreib das du es so wie vorgeschlagen gelöst hast, deine Antwort klingt für mich so wie "Danke, aber hab ne andere Lösung gefunden.".

Jetzt mitmachen!