Einführung in das Festlegen des Videohintergrunds in HTML5

Wir müssen oft Videos als Hintergrund für Webseiten verwenden, aber die Einstellung ist heute oft nicht zufriedenstellend und es kann im Grunde einige kleine Details geben, die nicht sehr gut sind Ich hoffe, Sie darauf aufmerksam zu machen und gemeinsam Fortschritte zu machen.

Schritt 1: Vorbereitung

Wenn Sie Ihre Arbeit gut machen möchten, müssen Sie zunächst ein Video wie dieses vorbereiten , wie im Bild gezeigt:

Ist es nicht schön? Natürlich ist es nicht meine Schönheit

Schritt 2: Stellen Sie das Video vor

Hier müssen wir das Video/Tag verwenden und dann Schreiben Sie den Pfad des Videos in die Quelle. Mit „Autoplay“ wird es automatisch abgespielt. Mit „Muted“ können Sie es stumm schalten und die Schleife so einstellen, dass es in einer Schleife abgespielt wird. Wenn Sie dies nicht möchten, können Sie weitere hinzufügen Wenn Sie mehr hinzufügen möchten, verlieren Sie es. Schritt 3: Passen Sie das Video an den Bildschirm an. Die oben genannten Schritte können unsere Anforderungen nicht erfüllen. Sie werden feststellen, dass es Bildlaufleisten gibt und das Video blockiert der Inhalt, den wir anzeigen möchten, aber das ist bei weitem nicht das Ergebnis, das wir wollen. Keine Angst, ich bin hier

<video id="v1" autoplay muted loop style="width: 100%">
    <source  src="mp4/loading.mp4">
</video>

Das ist in Ordnung, -webkit-filter:grayscale(100%), um den Farbton anzupassen. Dasselbe gilt für img

Schritt 4: Videowiedergabegeschwindigkeit

Sie können das Attribut „playbackRate“ des Videos verwenden, um die Wiedergabegeschwindigkeit des Videos zu steuern. Wenn Sie möchten, dass das Hintergrundvideo langsam abgespielt wird, können Sie hinzufügen Das folgende Javascript

video{
          position: fixed;
          right:0;
          bottom: 0;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          z-index: -9999;
          /*灰色调*/
          /*-webkit-filter:grayscale(100%)*/
 
      }

Okay, legen Sie Ihren coolen Hintergrund fest

Weitere Programmierkenntnisse finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonEinführung in das Festlegen des Videohintergrunds in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!