Hilfreiche Ratschläge

10 Empfehlungen für die Verwendung von Hintergrundvideos auf einer Website

Pin
Send
Share
Send
Send


YouTube-Hintergrundvideos können auf Mobilgeräten und Tablets nicht abgespielt werden, da dies in den YouTube-Richtlinien nicht zulässig ist.

Mit jQuery können wir jedoch ein Standardhintergrundbild hinzufügen, wenn der Browser feststellt, dass sich der Benutzer von einem mobilen Gerät aus bei der Site angemeldet hat.

Manuelle Lösung

Um festzustellen, ob sich ein Benutzer von einem mobilen Gerät oder Tablet aus angemeldet hat, können wir das Objekt auf einer bestimmten Bildschirmgröße ausblenden. Zum Beispiel möchten wir den Videohintergrund auf 480px-Breitbildschirmen entfernen. Sie müssen nur display: none zum player-Element hinzufügen:

Was jQuery betrifft, setzen wir hier die Variable is_mobile mit falsch. Stellen Sie dann sicher, dass die Klasse Spieler hat Anzeige: keine Optionen. Wenn ja, fügen Sie eine Klasse hinzu großes-hintergrund-voreingestellt-bild zu Abschnitten großer Hintergrund und kleiner-hintergrund-abschnitt um das Standard-Hintergrundbild zu verwenden. Sonst ändert sich nichts.

Lösung Verwenden des jQuery Plugins

Eine andere Möglichkeit, das Standard-Image festzulegen, ist das jQuery-Plugin. device.js (http://matthewhudson.me/projects/device.js/). Dies vereinfacht die Beschreibung der Bedingungen für verschiedene Bildschirmgrößen von Mobilgeräten. Mit diesem Plugin können wir einfach den folgenden Code schreiben:

Ich habe hier Methoden angewendet device.mobile () und device.tablet () um das Gerät zu überprüfen, von dem aus sich der Benutzer angemeldet hat. Wenn die Bedingung erfüllt ist, wird die Klasse hinzugefügt. großes-hintergrund-voreingestellt-bild zum Abschnitt großer Hintergrund und kleiner-hintergrund-abschnitt. Ansonsten klasse Spieler bleibt unverändert und das Video wird abgespielt.

Aufräumen

Video ist eine hervorragende Möglichkeit, die Botschaft Ihrem Publikum zu vermitteln. Es kann zu einem leistungsstarken Tool für Ihre Website werden, wenn die ordnungsgemäße Verwendung berücksichtigt wird.

Ich bin mir sicher, dass mit der Entwicklung und Verbesserung des Webdesigns immer mehr kreative Ideen für die Verwendung von Videos im Website-Design entstehen werden. Ich hoffe, Sie haben in diesem Tutorial etwas gelernt. Schreiben Sie Ihre Gedanken und Kommentare in die Kommentare.

Vom Übersetzer. Bei allen Wünschen und Kommentaren zur Übersetzung kontaktieren Sie mich bitte per PN. Danke!

Verwenden Sie die Überlagerung, um Artefakte auszublenden

Wenn Sie mit der Qualität Ihres Videos nicht zufrieden sind oder wenn das für Sie passende Video Probleme mit der Glätte hat, sollten Sie versuchen, dem Video eine Ebenenüberlagerung hinzuzufügen, um die Qualität zu maskieren. Dies ist einfach durch Hinzufügen eines absolut positionierten div unmittelbar nach dem Video oder durch Verwenden des :: after-Pseudoelements im Videocontainer möglich.

Sie müssen die CSS-Eigenschaft pointer-events: none auf dieses Element anwenden, damit die Steuerung der Videowiedergabe nicht beeinträchtigt wird.

Eine durchscheinende, gleichmäßige Farbüberlagerung kann gut aussehen, insbesondere wenn Sie die Farbüberlagerung an die Farben des restlichen Designs anpassen. Überlappung mit einem Muster sieht vielleicht noch besser aus, ist jedoch schwieriger mit einem Design zu kombinieren.

Um die Überlagerung in Aktion zu sehen, sehen Sie sich diese Demo mit Überlagerungsmustern und Videos von geringer Qualität an.

Begrenzen Sie die Gesamtgröße und -länge des Videos

Die niedrige Bitrate trägt dazu bei, eine reibungslose Videowiedergabe ohne Pufferpausen zu gewährleisten. Wir dürfen jedoch nicht vergessen, dass Benutzer nicht zur Website kommen, um Hintergrundvideos anzusehen. Verlassen Sie sich nicht darauf, dass sie 20 Megabyte zweiminütiges Video herunterladen.

Begrenzen Sie die Länge Ihres Videos immer auf 30 bis 40 Sekunden oder sogar auf einen kürzeren Moment, der nahtlos in eine Schleife übergeht und wie ein langes Video aussieht, jedoch nicht größer als 1 bis 2 Megabyte ist. Ein bisschen Werbung: Sie können einige gute geloopte Videos auf BG Stock finden. Ich habe dieses Videomaterial speziell für die Verwendung von Videos als Hintergrund auf Websites erstellt (es gibt jedoch auch genügend andere Videomaterialien).

Vermeiden Sie übermäßige Bewegungen

Das Schlüsselwort in der Kombination "Hintergrundvideo" lautet "Hintergrund". Video spielt eine unterstützende Rolle in Bezug auf den Inhalt der Website und wir müssen sicherstellen, dass es nicht auf sich aufmerksam macht. Hintergrundvideos sollten unauffällig und flüssig sein, damit die Benutzer nicht von dem abgelenkt werden, wofür sie auf die Website gelangt sind. Daher ist es notwendig, schnelles oder übermäßiges Schwenken, verwackelte / instabile Aufnahmen und plötzliches Ausschneiden von Videos zu vermeiden.

Stellen Sie genügend Kontrast für den Vordergrundtext bereit

Wenn sich im Hintergrund des Videos Text befindet, ist es wichtig, dass er lesbar ist. Wenn die Farbe des Texts mit dem Video kollidiert, müssen Sie eine Überlagerung hinzufügen, um den Text hervorzuheben oder dem Text eine Schatten- oder Hintergrundfarbe hinzuzufügen.

Das Fehlen scharfer Farbkontraste in Ihrem Video hilft ebenfalls. Beispielsweise ist es sehr schwierig, Text ohne Lesbarkeitsverlust auf dem Hintergrund eines solchen Videos (siehe Bild unten) zu platzieren, da sich dunkle und helle Bereiche abwechseln und der Schnittpunkt mit einem davon zu einem geringen Kontrast führt.

Stellen Sie sicher, dass der Hintergrund des gesamten Containers gefüllt ist

CSS3 hat eine großartige und bekannte Eigenschaft für die Hintergrundgröße und einer seiner möglichen Deckungswerte ermöglicht es dem Hintergrundbild, so viel Platz für das gesamte Element zu beanspruchen, nicht mehr und nicht weniger, während das ursprüngliche Seitenverhältnis beibehalten wird.

Und es gibt eine weniger bekannte Objektanpassungseigenschaft, mit der Sie denselben Trick mit DOM-Elementen ausführen können. Auf diese Weise stellen Sie sicher, dass unser Videocontainer gefüllt ist. Leider ist die Browserunterstützung für diese Eigenschaft immer noch unzureichend (hi, IE!). Sie müssen daher Polyfill oder JavaScript verwenden, um dieses Verhalten zu erzielen.

Die einfachste Option: jQuery-Plugin jQuery-Hintergrundvideo (geschrieben vom Autor dieses Artikels - Engus Russell), das all diese Dinge auf sich nimmt und auch einige andere nützliche Dinge erledigt. Dies ist nicht das einzige jQuery-Plugin für Hintergrundvideos.

An unterschiedliche Geräte anpassen

Die Unterstützung für Hintergrundvideos auf Mobilgeräten ist derzeit nicht sehr gut. iOS deaktiviert die automatische Wiedergabe von Videos, indem ein großes Wiedergabesymbol auf dem Video platziert wird, nachdem auf das Video geklickt wurde.

Wenn wir ein reguläres Video auf unsere Seite stellen, ist dieses Verhalten wunderbar. Da unser Video jedoch nur ein Gestaltungselement ist, benötigen wir eine Sicherungsoption in Form eines Hintergrundbilds. Da auf Android-Geräten auch Wiedergabeprobleme auftreten, ist es in beiden Fällen besser, das Video auszuschalten und ein Hintergrundbild zu verwenden.

Wie Sie dies tun, bleibt Ihnen überlassen - Sie können das Video auf kleinen Bildschirmen mithilfe einer Medienabfrage ausblenden oder das Video für alle iOS- / Android-Geräte löschen, nachdem Sie den Benutzeragenten mit JavaScript überprüft haben. Das Plug-in für jQuery-Hintergrundvideos führt dies standardmäßig aus.

Schleifen Sie das Video nicht für immer

Wenn Sie das Loop-Attribut zum Video-Tag hinzufügen, wird es von Ihrem Browser abgespielt, bis der Tab geschlossen wird. Dies verbraucht CPU-Ressourcen und kann den Rest der Seite verlangsamen.

Sie können dieses Attribut löschen und das Video einmal abspielen. In den meisten Fällen handelt es sich jedoch um ein kurzes Loop-Video, und diese Methode passt nicht zu uns. Es ist einfacher, JavaScript-Code zu schreiben, der die Wiedergabe nach einer bestimmten Zeit stoppt und den Timer zurücksetzt, wenn das Video manuell gestoppt oder gestartet wird (in den meisten Browsern reicht ein Rechtsklick aus).

Mit dem oben genannten Plug-in für jQuery-Hintergrundvideos können Sie das Video so konfigurieren, dass es nach einer bestimmten Zeit nicht mehr abgespielt wird.

Schaltfläche Pause hinzufügen

Unabhängig vom Grad Ihrer Bewunderung für das Hintergrundvideo gibt es mit Sicherheit Leute, die es anhalten möchten. Sie mögen es vielleicht nicht, es kann den Eindruck einer Verlangsamung des Computers erwecken, oder sie erwarten einfach nicht, dass es von selbst aufhört.

Mit JavaScript können wir ganz einfach eine Pause-Schaltfläche hinzufügen. In jQuery-Hintergrundvideos wird diese Schaltfläche standardmäßig hinzugefügt, und Sie müssen lediglich die Position und den Stil festlegen.

Erstellen Sie eine Bildschirmschoner-Folie im Desygner-Dienst

Sehen Sie sich ein visuelles Video-Tutorial an:

Um zu beginnen, gehen Sie zu desygner.com/ru. Hier können Sie sich über Ihr Facebook- oder Google-Konto einloggen.

So erstellen Sie ein neues Design Klicken Sie auf das Pluszeichen.

Als Nächstes kannst du eine Vorlage für YouTube mit den Abmessungen 1280 x 720 auswählen, wenn du genau diese Videorahmengröße hast.

Kürzlich habe ich Videos mit einer Auflösung von 1920 x 1080 erstellt. Daher erstelle ich eine Folie mit diesen Abmessungen. Gehen Sie dazu zum Ende der Site und geben Sie eine beliebige Größe in Pixel an. Dann klicke ich auf den "Start" -Button.

Ein Fenster zum Bearbeiten meines Designs wird geöffnet. Der Einfachheit halber habe ich den Maßstab der Folie leicht verkleinert, indem ich auf die Lupe mit einem "-" in der unteren rechten Ecke geklickt habe.

Als Erstes legen Sie den Hintergrund für diese Folie fest.. Sie können Ihr Bild als Hintergrund hochladen. Gehen Sie dazu in den Bereich "Bilder" links in der Symbolleiste und wählen Sie "Herunterladen". Sie können auch die integrierte Bildsuche verwenden.

Darüber hinaus kann der Hintergrund aus den vom Dienst angebotenen Optionen ausgewählt werden. Die freie Auswahl hier ist ziemlich anständig. Deshalb wählen wir bereit. Gehen Sie dazu in den Bereich "Ändern" - "Muster".

Hintergründe sind in Kategorien unterteilt, und Sie können auch nur eine Farbfüllung auswählen. In Bezug auf die Wahl des Hintergrunds und der Farben für die Elemente der endgültigen Folie können Sie von der Covergestaltung Ihrer Kanal- und Video-Cover ausgehen, und zwar in engen und harmonischen Farben.

Um das gewünschte Bild als Hintergrund zu verwenden, bewegen Sie die Maus darüber und wählen Sie den Punkt "Als Hintergrund festlegen".

Fügen Sie als Nächstes einen Aufruf an Aktionstext und Zeiger für Kanalabonnementelemente und Website-Links hinzu. Freunde, ich wiederhole, dies ist nur ein Beispiel für Text und Layout von Elementen. Sie können sie auf Ihre eigene Weise ändern, während Sie sich auf das Raster konzentrieren. Dies zeigt deutlich, an welchen Grenzen des Rahmens Sie die Elemente auf der Folie platzieren können. Beachten Sie auch die Bildlaufleiste unten und das Kanallogo in der rechten unteren Ecke, damit sie die Begrüßungsbildschirmelemente nicht überlappen.

Der Einfachheit halber mache ich einen Screenshot von mir selbst oder lasse auf der nächsten Registerkarte den Video-Editor mit dem endgültigen Bildschirmschoner geöffnet. Und ich orientiere mich daran, wenn ich Inschriften und Pfeile auf meiner Folie anordne.

Oben auf der Folie wird eine große Beschriftung angezeigt "Siehe auch auf meinem Kanal." Klicken Sie dazu auf Textwerkzeug in der Tafel auf der linken Seite. Ich wähle den "Titel" aus, indem ich ihn einfach mit der Maus anklicke. Sie können auch vorgefertigte Textstile verwenden. Beachten Sie jedoch, dass nicht alle russische Buchstaben unterstützen. Es gibt noch einen solchen Moment: Auf einer Folie im Editor sieht eine nicht unterstützte Schriftart möglicherweise in eine Richtung aus (ziemlich erfolgreich), und nach dem Herunterladen auf einen Computer ist sie bereits verzerrt und sieht schlecht aus.

Der Text erschien also auf meiner Folie. Wenn Sie mit der Maus darauf klicken, werden Bearbeitungswerkzeuge und Schieberegler an den Rändern angezeigt. Mit den Schiebereglern können wir die Größe und Breite des Textblocks anpassen, ihn über die gesamte Breite der Folie strecken und diesen Textblock an eine beliebige Stelle auf der Folie ziehen.

Um die Beschriftung zu ändern, klicken Sie auf "Ändern", markieren Sie den Text im Block mit dem Cursor und drucken Sie den Text aus. Wir können auch seine Größe, Schriftart und Ausrichtung relativ zum Textblock ändern, die Farbe, den Strich, den Abstand zwischen Buchstaben, Wörtern und Linien usw. einstellen. Genauer gesagt werden diese Punkte im Video-Tutorial für den Artikel gezeigt.

Unter der Titelleiste möchte ich zwei Fenster mit anderen Videos auf meinem Kanal platzieren und ein Abonnementelement auf dem Kanal dazwischen (in der Mitte) platzieren. Dafür füge einen Zeigerpfeil auf dieses Element und die Aufschrift "Subscribe to the channel" hinzu.

Ich kann das Pfeilbild vom Computer herunterladen, nachdem ich es aus dem Internet heruntergeladen habe, oder das fertige Bild in der Desygner-Bibliothek suchen. Da es eine gute Auswahl an Symbolen und Grafiken gibt, füge ich einen Pfeil aus der Bibliothek hinzu. Dazu gehe ich in den Bereich „Ändern“ und dann in den Unterabschnitt „Formen“ oder „Aufkleber“ (dort und dort gibt es Pfeile).

Ich klicke mit der Maus auf den Pfeil, den ich mag, und er wird meiner Folie hinzugefügt.

Dann kann ich es bearbeiten. Dazu wähle ich bereits auf der Folie den Pfeil mit der Maus aus, eine Symbolleiste erscheint. Sie können die Farbe der Form ändern, den Strich festlegen, sie drehen und spiegeln, wie Sie möchten. Mit den Schiebereglern kann ich die Größe und den Anteil des Pfeils anpassen sowie ihn an eine beliebige Stelle auf der Folie ziehen.

Für den Pfeil habe ich dieselbe Farbe und denselben Strich wie für den Text im Titel festgelegt. Es wurde leicht verkleinert und in der Mitte der Folie platziert, mit der Erwartung, dass sich auf den Seiten des Pfeils Fenster mit ähnlichen Videos befinden und in der Mitte über dem Pfeil - ein Abonnementfenster für meinen Kanal.

Unter dem Pfeil habe ich die Aufschrift "Abonniere den Kanal" hinzugefügt. Dazu habe ich wieder das Textwerkzeug verwendet - ich habe die Größe des Blocks mit den Schiebereglern angepasst, die Beschriftung in zwei Zeilen erstellt und an der Mitte des Blocks ausgerichtet. Die Textfarbe wurde auf dunkelgrau eingestellt, die Schriftart war Rubik und die Größe betrug 48 pt.

A Mein Blog und Handzeiger (Ich habe es im Bereich "Formen" - "Pfeile" ausgewählt), der sich links unten unter dem zukünftigen Block mit dem Video befindet, damit diese Elemente die Bildlaufleiste am unteren Rand des YouTube-Players nicht überlappen.

Der Text wurde genauso wie der Aufruf zum Abonnieren kopiert, nur die Beschriftung geändert. Zum Kopieren habe ich den Textblock mit der Maus ausgewählt und auf das Symbol in Form eines Blattes Papier geklickt. In der Nähe befindet sich auch ein Korbsymbol - dies ist, wenn Sie ein zusätzliches Element von der Folie entfernen müssen.

Nun, für die Zeigerhand habe ich dieselbe Farbe und denselben Strich wie für den Pfeil und den Titel auf der Folie festgelegt. Das ist alles mein Design.

Jetzt können wir diese Folie auf Ihrem Computer speichern. Klicken Sie dazu auf die Schaltfläche "Download".

Wichtig: Wenn Sie eine universelle Folie erstellen möchten, die in einem Video mit oder ohne Begrüßungsbildschirmelementen gut aussieht, können Sie einfach einen schönen Hintergrund erstellen und ohne Zeiger "Danke fürs Zuschauen" schreiben. So etwas in der Art:

Betrachten Sie die Dämpfung

Und nochmal: Unser Hintergrundvideo soll unauffällig sein. Plötzliche Bewegungen zu Beginn der Wiedergabe können den Benutzer ablenken. In den meisten Fällen empfiehlt es sich, beim Starten eines Videos einen Überblendungseffekt zu erstellen.

Dazu fügen wir ein Bild als Hintergrund für das Element hinzu, das standardmäßig die Videotransparenz enthält und auf 0 setzt (1 zu Beginn der Wiedergabe), und fügen einen CSS-Übergang für die Transparenz-Eigenschaft hinzu. Dies ist auch im jQuery-Hintergrundvideo-Plugin enthalten.

Es ist auch sinnvoll, eine Dämpfung hinzuzufügen, wenn das Video angehalten ist, insbesondere wenn das Ersatzbild eine höhere Qualität als das Video aufweist.

Hinzufügen einer letzten Folie zum Video

Im nächsten Schritt fügen Sie diese Folie am Ende des Videos hinzu. Zu diesem Zweck habe ich einen Test-Screencast aufgezeichnet und zur Bearbeitung in Camtasia Studio 9 geöffnet.

Ich füge dem Programm eine Folie hinzu, indem ich die Maus in die Zwischenablage ziehe. Dann ziehe ich es auf die Timeline, auf die Spur mit dem Video bis zum Ende. In ähnlicher Weise wird die Folie in anderen Videobearbeitungsprogrammen wie Premier Pro hinzugefügt.

Zum Einstellen der Foliendauer klicken Sie mit der rechten Maustaste darauf. Wählen Sie im angezeigten Menü "Dauer" und stellen Sie 15 Sekunden ein.

Übrigens In diesen letzten 15 Sekunden des Videos können Sie Musik hinzufügen, die unsere Folie begleitet. Ich habe zum Beispiel einen Track aus der kostenlosen YouTube-Bibliothek ausgewählt, ihn dem Clip-Korb hinzugefügt und ihn dann mit Ton auf die Timeline am Ende des Tracks gezogen. Ich habe die Dauer mit den Schiebereglern so angepasst, dass sie mit der endgültigen Folie übereinstimmt.

Reduzierte die Lautstärke der Musik leicht und fügte einen Fading-Effekt hinzu.

Als Nächstes bearbeite ich das Video wie gewohnt in 1920 x 1080 HD-Qualität und lade es auf YouTube hoch.

Hinzufügen von Bildschirmschonerelementen

Das Video wurde verarbeitet und auf YouTube hochgeladen (immer den eingeschränkten Zugriff zuerst oder nach einem Zeitplan festlegen, bis Sie das Video vollständig verarbeitet haben - Splash-Screen-Elemente hinzufügen, optimieren usw.).

Wir gehen in den Editor und wechseln auf die Registerkarte "Speichern und Anmerkungen beenden".

Um Bildschirmschonerelemente hinzuzufügen, können Sie vorgefertigte Vorlagen verwenden, einen Bildschirmschoner aus Ihren anderen Videos importieren oder Elemente manuell über die Schaltfläche „Element hinzufügen“ rechts hinzufügen.

Unten, unter dem Player, haben wir eine Timeline. Um die Arbeit mit dem Bildschirmschoner zu vereinfachen, bewegen wir den Schieberegler zum Zeitpunkt des Beginns der letzten Folie auf der Skala. Innerhalb des Rasters platzieren wir Elemente unseres Begrüßungsbildschirms darauf.

Weiter auf der Timeline können Sie den Anfang und das Ende aller Elemente anpassen. In meinem Fall erscheinen sie gleichzeitig, 15 Sekunden vor dem Ende des Videos, und die gesamte verbleibende Zeit des Videos wird angezeigt.

Wichtige Nuancen beim Hinzufügen eines externen Links

In letzter Zeit haben sich die YouTube-Regeln für das Hinzufügen externer Links zu Videos geändert (dies gilt für die endgültigen Bildschirmschoner und Tipps):

1. Um dem Video externe Links hinzuzufügen, muss dein Kanal mit dem YouTube-Partner verbunden sein. Das heißt, auf dem Kanal müssen Sie die Monetarisierung aktivieren und sie mit Ihrem AdSense-Konto verknüpfen. In diesem Fall wird das Partnerprogramm nur dann mit Ihnen verbunden, wenn der Kanal nicht gegen die Regeln verstößt, und zwar von 1000 Abonnenten und 4000 Stunden, in denen Sie das Video in den letzten 12 Monaten angesehen haben.

Wenn Sie zum ersten Mal alles tun (Sie haben die Site noch nicht mit dem Kanal verknüpft und die Monetarisierung nicht aktiviert), wird eine solche Inschrift angezeigt. Folgen Sie dem Link und folgen Sie den Anweisungen.

Wenn Sie die Monetarisierung aktivieren, müssen Sie keine Anzeigen im Video schalten. Wenn Sie es nicht benötigen, deaktivieren Sie einfach die Monetarisierung, wenn Sie ein Video hinzufügen.

2. Когда вы впервые добавляете внешнюю ссылку в видео, появится такое условие, с которым нужно согласиться. Оно запрещает добавлять ссылки с редиректом (перенаправлением) между доменами. Это напрямую относится к партнерским ссылкам, которые мы маскируем через редирект своим доменом (будь то плагин, или html-код редиректа).

Обойти данное условие можно, если использовать фреймовый сайт (там нет редиректа). Если действовать совсем по правилам, в таком случае размещаем в видео сугубо ссылки на свой блог или сайт, связанный с каналом. А уже на сайте можем давать партнерские ссылки. Sie haben beispielsweise ein Video mit einer Übersicht über einen Service oder ein Produkt, schreiben einen Artikel in Ihrem Blog, binden dieses Video dort ein, geben einen Partnerlink dazu und im YouTube-Video einen Link zu diesem Artikel.

Wir haben uns also Beispiele für das Erstellen einer Folie für einen interaktiven Begrüßungsbildschirm auf YouTube angesehen, das Hinzufügen einer solchen Folie zu einem Video und das Platzieren interaktiver Begrüßungsbildschirmelemente. Sie haben auch die neue YouTube-Regel zum Hinzufügen externer Links zu Videos angesprochen.

Ich hoffe, diese Informationen haben Ihnen weitergeholfen. Gerne beantworte ich Fragen und Kommentare.

Pin
Send
Share
Send
Send