Studiennotizen zum HTML5-Video-Tag (Player) (1): Erste Schritte_HTML5-Tutorialfähigkeiten-H5-Tutorial-php.cn

Studiennotizen zum HTML5-Video-Tag (Player) (1): Erste Schritte_HTML5-Tutorialfähigkeiten

WBOY

Freigeben： 2016-05-16 15:47:01

Original

1641 Leute haben es durchsucht

Ich habe kürzlich die Verwendung des Video-Tags (Player) in HTML5 untersucht. Hier sind einige Studiennotizen, um Ihre eigene Überprüfung und Aufzeichnung zu erleichtern initialisieren Sie es.

Es gibt tatsächlich viele Online-Tutorials. Die in w3cschool sind die einfachsten und detailliertesten, daher stellen diese wenigen einige direktere Anwendungen vor.

Verzeichnis dieses Artikels:

1. Verwenden Sie Tags
2. Fügen Sie einige notwendige Parameter hinzu
3. Automatisches Abspielen oder Laden

Schritt eins: Tags verwenden

Die zu verwendende Methode ist sehr einfach, nur eine Codezeile:

Kopieren Sie den Code Der Code ist wie folgt:

Schritt 2: Fügen Sie einige notwendige Parameter hinzu, z. B. den Pfad zum Abspielen des Videos und ob die Steuerleiste angezeigt werden soll

Um ein Video abzuspielen, müssen Sie über die Adresse des Videos verfügen, was bedeutet, dass Sie das src-Attribut im Tag festlegen müssen. Wenn Sie zu Beginn keine eigene benutzerdefinierte Steuerleiste erstellen können, verwenden Sie einfach die Standardleiste des Browsers und fügen Sie Steuerelemente hinzu, sodass es wie folgt aussieht:

Kopieren Sie den CodeDer Code lautet wie folgt:

Schritt 3: Lassen Sie das Video abspielen oder automatisch laden

Eine Sache, die Sie bei der Verwendung eines Players häufig tun müssen, ist, mit der Wiedergabe des Videos zu beginnen, sobald die Seite geladen ist. Anschließend müssen Sie das Video so einstellen, dass es automatisch abgespielt wird, d. h. das Autoplay-Attribut festlegen.

Code kopierenDer Code lautet wie folgt:

Manchmal ist für einige Benutzergewohnheiten keine automatische Wiedergabe erforderlich. Damit Benutzer das Video jedoch schnell sehen können, muss das Video automatisch geladen werden. Anschließend muss das Preload-Attribut festgelegt werden. Dies ist jedoch nicht der Fall Anstatt dieses Video zu laden, wird nur der erste Teil geladen.

Code kopierenDer Code lautet wie folgt:

Schritt 4: Machen Sie den Player standardisierter

Was bedeutet es, den Spieler standardisierter zu machen? Das heißt, es gibt eine Steuerleiste (bereits zuvor eingeführt), den Bildschirm, den Sie sehen, bevor Sie mit der Wiedergabe beginnen, und die Größe des Players wird angegeben.

Wenn der Player das Video lädt, wird am Anfang ein Initialisierungsbildschirm angezeigt. Oft ist es jedoch erforderlich, ein Bild festzulegen, damit das Video am Anfang des Videos angezeigt wird (manchmal, um das Publikum anzulocken). ein Bild, das wenig mit dem Video zu tun hat, oder aufgrund von Netzwerkproblemen wird dem Publikum kein schwarzer Bildschirm angezeigt, bevor das Video geladen wird. Zu diesem Zeitpunkt müssen Sie auch eine solche Einstellung vornehmen. das heißt, legen Sie das Posterattribut fest. Verfügbar:

Code kopierenDer Code lautet wie folgt:

Im Allgemeinen hat der Player während des Bewerbungsprozesses sozusagen eine bestimmte Größe Legen Sie die Länge und Breite des Players fest. Sie können das Stylesheet verwenden. Es kann innerhalb oder über das Attribut width height festgelegt werden. Es ist zu beachten, dass die Breite und Höhe des Players entsprechend den Proportionen des Videos eingestellt werden müssen. Andernfalls ist das Video am Ende leer, wenn die Breite und Höhe des Players die Pixel des Videos überschreitet. Es ist ein verschwommener Dehnungseffekt zu sehen. Wenn Sie also die Breite festlegen, müssen Sie darauf achten, wann sie hoch ist. Sie können jedoch zunächst nur die zu beobachtende Breite oder Höhe festlegen und dann die genauen Pixel ermitteln, z. B.

Code kopierenDer Code lautet wie folgt: