Video als Hintergrund? HTML 5

Ich möchte ein Video als Hintergrund anstelle eines Bildes verwenden, das sich automatisch auf den gesamten Bildschirm (Hintergrund) erstreckt.Video als Hintergrund? HTML 5

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

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

thx!

Quelle

2010-09-27 Roland

Bitte beachten Sie, dass viele Besucher diese Funktion hassen werden (ich blockiere das aktiv mit adblock). Darüber hinaus können Videos den Benutzer in zwei Fällen verletzen - bei gemessenen Verbindungen und beim Anzeigen der Seite in einer Remotedesktopsitzung, die bei geringer Upload-Bandbreite unbrauchbar werden kann. –

Zuerst Ihre HTML-Markup wie folgt aussieht:

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

Zweitens Ihr JavaScript-Code wird wie folgt aussehen:

<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 last but not least, Ihre CSS:

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

Dadurch wird ein Videoelement auf Ihrer Seite erstellt, das sofort mit der Wiedergabe des ersten Videos beginnt und anschließend iteriert s über die Playlist, die durch die JavaScript-Variable definiert ist. Ihr Kilometerstand mit dem CSS kann je nach CSS für den Rest der Website variieren, aber 100% Breite/Höhe sollte es auf einer einfachen Seite tun.

Quelle

2010-09-27 03:09:52

thx, aber der Fullscreen-Code funktioniert nicht wirklich. es zeigt nur das Video in seiner Originalgröße in der oberen linken oberen Ecke und macht auch den Rest des Textes auf der Website verschwinden! – Roland

Nun, wenn Sie Fullscreen wollen, dann wird der Rest des Textes auf der Website offensichtlich verschwinden.Da der Vollbildmodus nicht funktioniert, versuchen Sie, die Höhe und Breite des Videoelements auf die Größe des Darstellungsbereichs einzustellen. Beispiel: 'video.width = 1024; video.height = 768; ' –

Werfen Sie einen Blick auf meine Antwort unten. Es berücksichtigt alle Bildschirmgrößen :) – sydlawrence

Ich könnte eine Lösung für das Video als Hintergrund habe, gestreckt, um den Browser-Breite oder Höhe, (aber das Video wird noch das Seitenverhältnis erhalten, könnte nicht für die noch eine Lösung finden.):

Put das Video direkt nach dem Body-Tag mit style="width:100%;". Rechts Nachworte, setzen Sie ein "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">

Setzen Sie alle Ihre Inhalte in den bodydummy -div und setzen Sie die Z-Indizes richtig in CSS wie folgt aus:

#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 Hilfe. Lass mich wissen, wenn du eine Lösung finden könntest, dass das Video nicht das Seitenverhältnis erhält, so könnte es das ganze Browserfenster füllen, also müssen wir kein bgimage setzen.

Quelle

2011-03-01 13:24:05 moritz

Werfen Sie einen Blick auf meine Jquery videoBG Plugin

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

Machen Sie jedes Video HTML5 eine Hintergrund-Website ... hat ein Bild Rückfall für Browser, die html5

Wirklich einfach zu nicht unterstützen Verwenden Sie

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

Quelle

2011-03-15 04:06:41 sydlawrence

Danke Sydlawrence! Ich begann in einem HTML5-Buch (Lawson und Sharp), ging dann ins Internet ... suchte überall nach "video background html5" und las viele nicht-ganz-die-richtige-Informationen durch. Ihre Lösung hat wie ein Zauber funktioniert. –

@sydlawrence das ist ausgezeichnet! Ich habe Ihre Lösung implementiert. Ich habe jedoch ein Problem mit der Integration und das ist, dass das Poster für eine Sekunde aufblinkt, bevor das Video geladen wird - wie kann es gemacht werden, damit das Poster nur geladen wird, wenn es keine Kompatibilität mit dem HTML5-Video gibt? – willdanceforfun

hi syd, Ihr Plugin funktioniert großartig, aber es scheint nicht auf Firefox zu arbeiten? wie ist das möglich? Überall wo es funktioniert – woony

Video als Hintergrund? HTML 5

Antwort

Verwandte Themen