Heim > Artikel > Web-Frontend > Xiaoqiangs mobiler HTML5-Entwicklungsweg (12) – ausgehend von einem Multimedia-Tag

Xiaoqiangs mobiler HTML5-Entwicklungsweg (12) – ausgehend von einem Multimedia-Tag

黄舟Original: 2017-01-22 11:33:451384Durchsuche

1. Videowiedergabe

<html>  
    <head>  
        <title>多媒体播放</title>  
    </head>  
    <body>  
        <embed src="http://demo.inwebson.com/html5-video/iceage4.mp4">  
    </body>  
</html>

Der Effekt ist wie folgt:

Xiaoqiangs mobiler HTML5-Entwicklungsweg (12) – ausgehend von einem Multimedia-Tag

Attribut

Neues Attribut in HTML5.

Attributwert Beschreibung

Höhe Pixel Legen Sie die Höhe des eingebetteten Inhalts fest.

src url Die URL des eingebetteten Inhalts.

Typ Typ Definiert den Typ des eingebetteten Inhalts.

Breite Pixel Legen Sie die Breite des eingebetteten Inhalts fest.

-Tag unterstützt globale Attribute in HTML5 und Ereignisattribute in HTML5

Fügen wir zum Ausprobieren ein Breitenattribut hinzu

<embed src="http://demo.inwebson.com/html5-video/iceage4.mp4" width="100px"/>

Das Xiaoqiangs mobiler HTML5-Entwicklungsweg (12) – ausgehend von einem Multimedia-Tag

type-Attribut gibt den MIME-Typ des eingebetteten Inhalts an.

Informationen zu MIME-Typen finden Sie unter IANA MIME-Typen

Zum Beispiel:

<!DOCTYPE html>  
<html>  
<body>  
  
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />  
  
</body>  
</html>

2. Einführung in IANA MIME

Der Mehrzweck-Internet-Mail-Erweiterungstyp ist ein Typ, der eine Datei mit einer bestimmten Erweiterung so festlegt, dass sie von einer Anwendung geöffnet wird. Wenn auf die Datei mit der Erweiterung zugegriffen wird, öffnet der Browser dies automatisch Verwenden Sie zum Öffnen das angegebene Programm. Es wird hauptsächlich verwendet, um einige vom Client definierte Dateinamen und einige Methoden zum Öffnen von Mediendateien anzugeben.

Jeder MIME-Typ besteht aus zwei Teilen. Der erste Teil ist die große Datenkategorie, wie Ton, Audio, Bild usw., und der zweite Teil definiert den spezifischen Typ.

Gemeinsame MIME-Typen (universell):

Hypertext Markup Language text.html text/html

xml document.xml text/xml

XHTML-Dokument. xhtml application/xhtml+xml

Normaler text.txt text/plain

RTF text.rtf application/rtf

PDF-Dokument .pdf application/pdf

Microsoft Word-Datei .word application/msword

PNG-Bild.png-Bild/png

GIF-Grafik.gif-Bild/gif

JPEG-Grafik.jpeg-Bild/. jpeg

au-Sounddatei .au audio/basic

MIDI-Musikdatei mid,.midi audio/midi,audio/x-midi

RealAudio-Musikdatei ra, . ram audio/x-pn-realaudio

MPEG-Datei .mpg, .mpeg-Video/mpeg

AVI-Datei .avi-Video/x-msvideo

GZIP-Datei .gz-Anwendung /x-gzip

TAR-Datei .tar application/x-tar

Beliebige Binärdatenanwendung/Octet-Stream

3. Einführung in HTML5

Html5 wird zum neuen Standard für HTML, XHTML und HTML DOM.

Die letzte Version von HTML wurde 1999 erstellt. Die Welt des Webs hat sich seitdem dramatisch verändert.

HTML5 ist noch in Arbeit. Allerdings verfügen die meisten modernen Browser bereits über eine gewisse HTML5-Unterstützung.

HTML5 ist das Ergebnis einer Zusammenarbeit zwischen dem W3C und der WHATWG.

——W3C bezieht sich auf World Wide Web Consortium, World Wide Web Consortium.

– WHATWG bezieht sich auf die Web Hypertext Application Technology Working Group.

Die WHATWG arbeitet an Webformularen und -anwendungen, während sich das W3C auf XHTML 2.0 konzentriert. Im Jahr 2006 beschlossen die beiden Parteien, gemeinsam eine neue HTML-Version zu erstellen.

Einige für HTML5 festgelegte Regeln:

Neue Funktionen sollten auf HTML, CSS, DOM und JavaScript basieren.
Reduzieren Sie den Bedarf an externen Plug-Ins (wie Flash) – viele leistungsstarke Multimedia-Tags integriert
Bessere Fehlerbehandlung
Mehr Markup zum Ersetzen von Skripten
HTML5 sollte geräteunabhängig sein – läuft perfekt auf PC und Mobilgeräten
Der Entwicklungsprozess sollte für die Öffentlichkeit transparent sein

Einige interessante neue Funktionen in HTML5:

Canvas-Element zum Zeichnen
Video- und Audioelemente für die Medienwiedergabe
Bessere Unterstützung für lokale Offline-Speicherung
Neue spezielle Inhaltselemente, wie Artikel, Fußzeile, Kopfzeile, Navigation, Abschnitt
Neue Formularsteuerelemente, wie Kalender, Datum, Uhrzeit, E-Mail, URL, Suche

Ausführlichere Informationen zu HTML5 finden Sie in meinem Blog-Thema: http://blog.csdn.net/column/details/dawanganban-html5.html

Neueste Versionen von Safari, Chrome, Firefox, und Opera unterstützen bestimmte HTML5-Funktionen. Internet Explorer 9 unterstützt bestimmte HTML5-Funktionen.

4. Globale Attribute in HTML5

Die folgenden globalen Attribute können für jedes HTML5-Element

Attribut

Beschreibung

accesskey gibt die Tastenkombination für den Zugriff auf das Element an.

class gibt den Klassennamen des Elements an (wird verwendet, um die Klasse im Stylesheet anzugeben ).

contenteditable gibt an, ob Benutzer Inhalte bearbeiten dürfen.

contextmenu Gibt das Kontextmenü des Elements an.

dir gibt die Textrichtung des Inhalts im Element an.

dragable Gibt an, ob der Benutzer das Element ziehen darf.

dropzone Gibt an, was passiert, wenn das gezogene Element/die gezogenen Daten in das Element abgelegt wird.

hidden gibt an, dass das Element irrelevant ist. Ausgeblendete Elemente werden nicht angezeigt.

id gibt die eindeutige ID des Elements an.

lang gibt den Sprachcode des Inhalts im Element an.

Rechtschreibprüfung Gibt an, ob das Element auf Rechtschreibung oder Grammatik überprüft werden muss.

style gibt den Inline-Stil des Elements an.

tabindex gibt die Reihenfolge der Tabulatortastensteuerung von Elementen an.

Titel gibt zusätzliche Informationen über das Element an.

5. Globale Ereignisattribute

HTML 4 fügt die Möglichkeit hinzu, Verhalten im Browser durch Ereignisse auszulösen, z as Ein Stück JavaScript wird gestartet, wenn der Benutzer auf ein Element klickt.

In der folgenden Tabelle sind die Standardereignisattribute aufgeführt, die in HTML 5-Elemente eingefügt werden können, um das Ereignisverhalten zu definieren.

Fensterereignisattribut

Ereignis, das durch ein Fensterobjekt ausgelöst wird.

Gilt für das

-Tag: Die markierte Farbe ist das neue Tag (html5)

Attribut

Wert

Beschreibung

onafterprint script Führen Sie das Skript aus, nachdem das Dokument gedruckt wurde

onbeforeprint script Führen Sie das Skript aus, bevor das Dokument gedruckt wird

onbeforeonload script Führen Sie das Skript aus bevor das Dokument geladen wird

onblur-Skript Skript ausführen, wenn das Fenster den Fokus verliert

onerror-Skript Skript ausführen, wenn ein Fehler auftritt

onfocus-Skript Skript ausführen, wenn das Fenster den Fokus erhält

onhachange script Skript ausführen, wenn sich das Dokument ändert

onload script Skript ausführen, wenn das Dokument geladen wird

onmessage script Skript ausführen, wenn eine Nachricht ausgelöst wird

onoffline script Skript ausführen, wenn das Dokument offline ist

ononline-Skript Führen Sie das Skript aus, wenn das Dokument online ist

onpagehide-Skript Führen Sie das Skript aus, wenn das Fenster ausgeblendet ist

onpageshow-Skript Führen Sie das Skript aus, wenn das Fenster sichtbar ist

onpopstate-Skript Wenn das Fenster sichtbar ist, Skript ausführen, wenn sich der Verlauf ändert

onredo-Skript Skript ausführen, wenn das Dokument eine erneute Ausführung durchführt (Wiederherstellen)

onresize-Skript Skript ausführen, wenn die Fenstergröße geändert wird

onstorage-Skript, wenn das Skript ausgeführt wird, wenn das Dokument geladen wird

onundo-Skript, wenn der Web Storage-Bereich aktualisiert wird (wenn sich die Daten im Speicherplatz ändern)

onunload-Skript Führen Sie das Skript aus, wenn der Benutzer das Dokument verlässt

Formularereignisse

Ereignisse, die durch Aktionen in HTML-Formularen ausgelöst werden.

gilt für alle HTML 5-Elemente, wird jedoch am häufigsten in Formularelementen verwendet:

Attribute

Wert

Beschreibung

onblur script Skript ausführen, wenn Element den Fokus verliert

onchange script Skript ausführen, wenn sich Element ändert

oncontextmenu script Skript ausführen, wenn Kontextmenü ausgelöst wird

onfocus script Führen Sie das Skript aus, wenn das Element den Fokus erhält

onformchange script Führen Sie das Skript aus, wenn sich das Formular ändert

onforminput script Führen Sie das Skript aus, wenn das Formular Benutzereingaben erhält

oninput script Führt das Skript aus, wenn das Element Benutzereingaben erhält

oninvalid script Führt das Skript aus, wenn das Element ungültig ist

onreset script Führt das Skript aus, wenn das Formular zurückgesetzt wird. HTML 5 wird nicht unterstützt.

onselect script Führt das Skript aus, wenn das Element ausgewählt ist

onsubmit script Führt das Skript aus, wenn das Formular gesendet wird

Tastaturereignis

Ereignis, das durch das ausgelöst wird Tastatur.

Gilt für alle HTML 5-Elemente:

Attribute

Wert

Beschreibung

onkeydown script Führt das Skript aus, wenn die Taste gedrückt wird

onkeypress script Führt das Skript aus, wenn die Taste gedrückt und losgelassen wird

onkeyup script Führt das Skript aus, wenn die Taste losgelassen wird

Mausereignisse

Ereignisse, die durch Maus- oder ähnliche Benutzeraktionen ausgelöst werden.

Gilt für alle HTML 5-Elemente:

Attribute

Wert

Beschreibung

onclick script Führt das Skript aus, wenn mit der Maus geklickt wird

ondblclick script Führt das Skript aus, wenn mit der Maus doppelgeklickt wird

ondrag script Führt das Skript aus, wenn das Element gezogen wird

ondragend script Beim Ziehen Führen Sie das Skript am Ende des Ziehvorgangs aus

ondragenter script Führen Sie das Skript aus, wenn das Element auf ein gültiges Drag-and-Drop-Ziel gezogen wird

ondragleave script Führen Sie das Skript aus wenn das Element das gültige Drag-and-Drop-Ziel verlässt

ondragover script Skript, das ausgeführt wird, wenn das Element über ein gültiges Drag-and-Drop-Ziel gezogen wird

ondragstart script Skript, das ausgeführt wird, wenn der Drag-Vorgang beginnt

ondrop-Skript Während das gezogene Element gezogen wird. Führen Sie das Skript aus, wenn die Maustaste gedrückt wird.

onmousedown-Skript. Führen Sie das Skript aus, wenn die Maustaste gedrückt wird.

onmousemove-Skript. Führen Sie das aus Skript, wenn sich der Mauszeiger bewegt

onmouseout script Wird ausgeführt, wenn sich der Mauszeiger aus dem Element bewegt Script

onmouseover script Führt das Skript aus, wenn sich der Mauszeiger über das Element bewegt

onmouseup-Skript Führt das Skript aus, wenn die Maustaste losgelassen wird

onmousewheel-Skript Wird ausgeführt, wenn das Mausrad gedreht wird. Skript

onscroll-Skript Führt das Skript aus, wenn die Bildlaufleiste des Elements gescrollt wird

Medien Ereignis

Ereignisse, die durch Medien wie Video, Bild und Audio ausgelöst werden.

gilt für alle HTML 5-Elemente, wird jedoch am häufigsten in Medienelementen (wie Audio, Einbettung, Bild, Objekt und Video) verwendet:

Attribute

Wert

Beschreibung

onabort script Führen Sie das Skript aus, wenn ein Abbruchereignis auftritt

oncanplay-Skript Wenn das Medium mit der Wiedergabe beginnen kann kann aber aufgrund der Pufferung erforderlich sein. Skript ausführen, wenn gestoppt

oncanplaythrough script Skript ausführen, wenn Medien bis zum Ende abgespielt werden können, ohne aufgrund der Pufferung anzuhalten

ondurationchange script Skript ausführen, wenn sich die Medienlänge ändert

onemptied script Skript, das ausgeführt wird, wenn das Medienressourcenelement plötzlich leer ist (Netzwerkfehler, Ladefehler usw.)

onended Skript, das ausgeführt wird, wenn das Ende des Mediums erreicht wurde

onerror-Skript Wenn beim Laden eines Elements ein Fehler auftritt

onloadeddata-Skript

onloadedmetadata-Skript Führt das Skript aus, wenn die Dauer des Medienelements und anderer Mediendaten abgelaufen ist wurden geladen

onloadstart script when Führen Sie das Skript aus, wenn der Browser mit dem Laden von Mediendaten beginnt

onpause script Führen Sie das Skript aus, wenn die Mediendaten angehalten werden

onplay script Führen Sie das Skript aus wenn die Mediendaten gerade abgespielt werden

onplaying-Skript, wenn das Skript ausgeführt wird, wenn die Mediendaten abgespielt werden

onprogress-Skript, wenn der Browser die Mediendaten abruft.

onratechange-Skript. Führen Sie das Skript aus, wenn sich die Wiedergaberate der Mediendaten ändert.

onreadystatechange-Skript. Führen Sie das Skript aus, wenn sich der Bereitschaftsstatus ändert.

onseeking-Skript Attribut [1] des Medienelements ist nicht mehr wahr und die Positionierung wurde beendet.

Onseeking-Skript. Führen Sie das Skript aus, wenn das Positionierungsattribut des Medienelements wahr ist und die Positionierung begonnen hat . Führen Sie das Skript aus, wenn beim Abrufen der Mediendaten ein Fehler auftritt (Verzögerung). Wenn der Browser das Skript beim Abrufen der Mediendaten ausführt, stoppen Sie es, bevor die gesamte Mediendatei abgerufen wird 🎜>ontimeupdate script Führt das Skript aus, wenn das Medium seine Wiedergabeposition ändert.

onvolumechange script Wenn das Medium die Lautstärke ändert oder wenn die Lautstärke auf stumm gestellt ist hat aufgehört zu spielen, möchte aber weiterspielen

Im nächsten Artikel wird die Verwendung globaler Attribute und Ereignisse im Detail vorgestellt.

Das Obige ist Xiaoqiangs Entwicklungsweg für HTML5-Mobilgeräte (12). Beginnen Sie mit einem Multimedia-Tag und achten Sie bitte auf verwandte PHP-Chinesisch-Inhalte Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (11) – Links, Bilder, Tabellen, FramesNächster Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (11) – Links, Bilder, Tabellen, Frames

In Verbindung stehende Artikel

Mehr sehen