wake-up-neo.com

Video als Seitenhintergrund? HTML 5

Ich möchte ein Video als Hintergrund anstelle eines Bildes verwenden, das sich automatisch über den gesamten Bildschirm erstreckt (Hintergrund).

Ich möchte auch Videos und Bilder drehen, damit ein zufälliges Video/Bild in beliebiger Reihenfolge angezeigt wird.

Es wäre auch schön zu wissen, wie die Videowiedergabe verzögert wird, sodass das Video nur einmal 30 Sekunden nach dem Laden der Site abgespielt wird.

danke!

56
Roland

Schauen Sie sich mein jquery videoBG Plugin an

http://syddev.com/jquery.videoBG/

HTML5-Videos als Websitehintergrund festlegen ... hat ein Image-Fallback für Browser, die HTML5 nicht unterstützen

Wirklich einfach zu bedienen

Lassen Sie mich wissen, wenn Sie Hilfe benötigen.

37
sydlawrence

Zunächst sieht Ihr HTML-Markup folgendermaßen aus:

<video id="awesome_video" src="first_video.mp4" autoplay />

Zweitens sieht Ihr JavaScript-Code folgendermaßen aus:

<script type="text/javascript">
  var index = 1,
      playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('awesome_video');

  video.addEventListener('ended', rotate_video, false);

  function rotate_video() {
    video.setAttribute('src', playlist[index]);
    video.load();
    index++;
    if (index >= playlist.length) { index = 0; }
  }
</script>

Und zu guter Letzt Ihr CSS:

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Dadurch wird auf Ihrer Seite ein Videoelement erstellt, das sofort mit der Wiedergabe des ersten Videos beginnt. Anschließend wird die durch die JavaScript-Variable definierte Wiedergabeliste durchlaufen. Ihre Meilen mit dem CSS können je nach CSS für den Rest der Website variieren, aber 100% Breite/Höhe sollten dies auf einer einfachen Seite tun.

25

Möglicherweise habe ich eine Lösung für das Video als Hintergrund, die auf die Breite oder Höhe des Browsers ausgedehnt ist (das Video behält jedoch das Seitenverhältnis bei, es konnte jedoch noch keine Lösung gefunden werden.):

Platziere das Video direkt nach dem Body-Tag mit style="width:100%;". Setzen Sie gleich nach den Worten einen "bodydummy" -Tag:

<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>    
</video>

<img id="bgImg" src="videos/poster.png" />

<!-- This image stretches exactly to the browser width/height and lies behind the video-->

<div id="bodyDummy">

Fügen Sie Ihren gesamten Inhalt in das bodydummy -Div ein und setzen Sie die Z-Indizes in CSS wie folgt korrekt ein:

#bgImg{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#bgVideo{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#bodyDummy{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: auto;
    width: 100%;
    height: 100%;
}

Hoffe ich konnte helfen. Lassen Sie mich wissen, wann Sie eine Lösung finden könnten, bei der das Video nicht das Seitenverhältnis beibehält, damit es das gesamte Browserfenster ausfüllt und wir kein Bild einfügen müssen.

8
moritz