Harry Potter Zeitung

Wir erstellen Videos auf Seiten wie in der legendären Zeitung Harry Potter.
Maximales Eintauchen schaffen!


Um dies zu erstellen, benötigen wir ein kurzes Video (Vorschau), das geloopt und ohne Ton abgespielt wird. Das zweite Video ist ein normales Video mit Ton, der sich beim Bewegen, Klicken oder Scrollen einschaltet.

In die Seite eingebetteter HTML-Code:

<div class="smartVideo graysv"> <video data-cprotate data-cprotatehover muted loop data-inits="autoplay" data-src="./test1.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> <video data-cprotate data-volume="1" data-src="./test2.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> </div> 

2 in ein div eingewickelte Videos sind mit der smartVideo- Klasse gekennzeichnet, und die Graustufen- Klasse wird hinzugefügt, wenn Sie einen Schwarzweißfilter für das Video benötigen, bis es eingeschaltet oder ohne Ton ist!

data-cprotate - teilt dem Skript mit, dass das Haupt- und das Vorschau-Video gedreht werden.
data-src - Pfad zur Videodatei.
Datenplakat - Der Pfad zum Bild, das angezeigt wird, während das Video geladen wird.
playinline - für die automatische Ausführung unter Smartphones wird sie nicht ohne sie gestartet.
pip = "false" - damit Browser den Download-Button nicht anzeigen.

Für den ersten Clip müssen wir die Attribute gedämpfte Schleife data-inits = autoplay setzen , was bedeutet: ohne Ton, geloopt und Autostart, wenn auf dem Bildschirm sichtbar.

Für den ersten Videoclip gibt es ein Attribut data-cprotatehover , das optional ist und das Starten des Videos bedeutet, wenn Sie den Mauszeiger darüber halten. Sie müssen es nicht auf das zweite Video setzen!

Das zweite Video muss Datenvolumen = 1 Lautstärke angeben. Wenn Sie jedoch keine Sounds wünschen, müssen Sie 0 setzen .

Ein Beispiel für das Erstellen von Bewertungen auf der Seite.

Um eine Verbindung herzustellen, müssen Sie CSS-Stile auf der Seite einfügen:

 <style> .smartVideo{ width:300px; } .smartVideo video { width:100%; z-index:0; position: absolute; top:0; left:0; user-select:none; border:0; padding:0; margin:0; vertical-align:middle; cursor:pointer; outline:none; } .smartVideo > video:first-child { position:relative; z-index:1; } .smartVideo video:not([data-inits="autoplay"]){visibility:hidden;z-index:0;} .graysv video{ -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .graysv.cpsound video,.graysv:hover video:not([data-mouseout]){ -webkit-filter: none; -ms-filter: none; filter: none; } </style> 

Und wir brauchen eine JS-Datei, die vor dem schließenden Body- Tag verbunden werden muss.

 <script src="/smartvideo.js"></script> 

Quellen zum Download

Das Drehbuch wurde in Eile gesammelt!

Wenn es viele Interessierte gibt, ist es möglich, eine vollwertige Bibliothek mit verschiedenen Einstellungen zu erstellen und auf einen Github zu legen!

Wenn sich jemand für die technische Seite von JavaScript interessiert, schreibe, ich kann im nächsten Artikel JavaScript-Code malen (obwohl ich ihn vorher gut kämmen und reinigen muss! :-)

Wichtige Punkte von smartVideo:

1. Funktioniert unter Smartphones und Tablets.
2. Stoppt das Video automatisch, wenn eine Person zu einem Anruf wechselt oder zwischen Browser-Registerkarten wechselt.
3. Stoppt oder startet das Video automatisch, wenn Sie durch die Seite scrollen!
4. Startet das Herunterladen von Videos und Postern nur, wenn das Video in Sichtweite ist.

PS: Wie formatiere ich den SmartVideo-HTML-Code für Screenreader?

Mit freundlichen Grüßen Ersteller des Landing Designers für Freiberufler CMS cPortfolio