Bauen Sie einen Media -Player mit HTML auf

Die Möglichkeiten für Medien in HTML haben mit der Einführung der Video- und Audioelemente in HTML5 gestartet. Jetzt können wir Videos und Audio in Websites einbetten, ohne proprietäre Technologien wie Flash oder Silverlight erforderlich zu machen.

Mit Browser -Unterstützung besser als je zuvor, und neue Technologien wie WebVTT sind jetzt eine gute Zeit, um diese neuen HTML -Elemente kennenzulernen (oder erneut zu besuchen).

sitePoint hat gerade auf den Markt gebracht. Erstellen Sie Ihren eigenen HTML -Medienspieler, ein Kurs, der Sie mit HTML5 -Medienelementen auf den neuesten Stand bringt und wie Sie sie mit CSS und JavaScript auf die nächste Stufe bringen können.

Hier ist ein Video aus dem Kurs, in dem der Ball ins Solling kommt und Ihnen zeigt, wie Sie den HTML -Code für einen benutzerdefinierten Mediplayer strukturieren. (Spätere Videos zeigen, wie Sie mit CSS und JavaScript darauf aufbauen, um einen voll funktionsfähigen, benutzerdefinierten Media -Player zu erstellen.)

Laden des Spielers…

Sie können die Quelldateien für diese Demo auf GitHub herunterladen.

Wenn Sie dies nützlich gefunden haben, lesen Sie den vollständigen Kurs bei SitePoint - der Sie von den Grundlagen bis hin zur Entwicklung eines voll funktionsfähigen, benutzerdefinierten Media -Players übernimmt und sowohl Audio als auch Video abspielt.

häufig gestellte Fragen (FAQs) zum Erstellen eines Medienspieler in HTML

Was sind die grundlegenden HTML -Tags, die zum Erstellen eines Media -Players erforderlich sind? Diese Tags werden verwendet, um Video- oder Audioinhalte auf Ihre Webseite einzubetten. Das

-Tag wird in diesen Tags verwendet, um die Quelldatei der Medien anzugeben. Das Attribut "Steuerelemente" kann zu den

oder den Tags hinzugefügt werden, um Spielen, Pause und Lautstärkeregelungen bereitzustellen. Reaktionsschnell? Durch die Festlegung der Breite des Videos auf 100% und die Höhe des automatischen Höhe skaliert der Video -Player die Größe seines Containers. Dies stellt sicher, dass sich der Media -Player an verschiedene Bildschirmgrößen und -orientierungen anpasst. das Tag. Dieses Tag wird innerhalb des

Wie kann ich die Steuerelemente meines Media -Players anpassen? Sie können die Standardsteuerungen ausblenden, indem Sie das Attribut "Steuerelemente" aus dem

oder Tag entfernen und Ihre eigenen Steuerelemente mithilfe von HTML -Schaltflächen und JavaScript -Ereignishandlern erstellen. CSS kann verwendet werden, um diese Schaltflächen zu stylen. Quellendateien in verschiedenen Formaten. Der Browser verwendet die erste Quelldatei, die er unterstützt. Dies kann unter Verwendung mehrerer

-Tags im Sie können ein Video oder Audio in Ihrem Media -Player mit dem Attribut "Loop" im

oder im Tag "Loop" aufnehmen. Das Attribut "Loop" ist ein boolescher Attribut. Bei der Vorhandensein wird angegeben, dass das Audio/Video jedes Mal von vorne beginnt, wenn es fertig ist. Sie können das Audio in Ihrem Media -Player mit dem "gedämpften" Attribut im

oder tag stummschalten. Das gedämpfte Attribut ist ein boolescher Attribut. Bei der Vorhandensein wird angegeben, dass die Audioausgabe des Videos gedämpft werden sollte. Das Video oder Audio in Ihrem Media -Player, das das Attribut "PRELOAD" im

oder tag verwendet. Das Attribut "Vorspannung" gibt an, ob und wie der Autor der Meinung ist, dass das Audio/Video beim Laden der Seite geladen werden sollte. Es hat drei Werte: 'Auto', 'Metadata' und 'None'. > Ein Video oder Audio im Vollbildmodus erfordert die Vollbild -API, die eine JavaScript -API ist. Sie können mit der Methode "RequestFullScreen" das Video- oder Audioelement -Vollbildmodus zum Ausdruck bringen. Diese Methode muss als Ergebnis einer Benutzeraktion ausgeführt werden, z. B. ein Klickereignis.

Das obige ist der detaillierte Inhalt vonBauen Sie einen Media -Player mit HTML auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!