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!