现在如果要在页面中使用 Video 标签 , 需要考虑三种情况 支持 支持 ogg theora 或者 vp8 (如果这玩意儿没出事的话)的( Opera 、 Mozilla 、 Chrom) , 支持 H.264 的( Safari 、 IE 9 、 Chrome) unterstützt nicht (IE6, 7, 8). Lassen Sie uns das HTML 5 -Video auf der technischen Ebene verstehen, einschließlich der Verwendung von Video -Tags, den Medienattributen und Methoden, die Videoobjekte verwenden können, sowie Medienereignisse.
Verwendung von VideotikationenVideo -Tags enthalten SRC, Poster, Vorspannung, Autoplay, Schleifen, Steuerelemente, Breite, Höhe und andere Attribute sowie eine interne Etikett <quelle>. Zusätzlich zum <Recess> -Label kann das Video -Tag auch den Inhalt enthalten, der zurückgegeben wird, wenn das angegebene Video nicht abgespielt werden kann.
(1) SRC -Attribute und Poser -AttributeKönnen Sie sich vorstellen, was das SRC -Attribut verwendet wird? Wie bei der <MEG> -bezeichnung wird dieses Attribut verwendet, um die Adresse des Videos anzugeben. Das Poster -Attribut wird verwendet, um ein Bild anzugeben, das angezeigt wird (Vorschau -Diagramm), wenn die aktuellen Videodaten ungültig sind. Die ungültigen Videodaten können sein, dass das Video geladen wird, was der Fehler der Videoadresse sein kann.
<Video -Breite = 658 Höhe = 444 src = http: //www.yooneame.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay> </Video>(2) Vorspannungsattribut
Dieses Attribut kann auch durch den Namen verstanden werden. Es gibt drei optionale Werte: Keine, Metadaten, Auto. Wenn dieses Attribut nicht verwendet wird, ist die Standardeinstellung automatisch.
<Video -Breite = 658 Höhe = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = None> </Video >
Keine: Keine Vorladung. Die Verwendung dieses Attributwerts kann sein, dass die Seitenproduzenten glauben, dass Benutzer dieses Video nicht erwarten oder HTTP -Anforderungen reduzieren.
Metadaten: Partial Pre -Load. Mit diesem Attributwert ist der Seitenproduzent der Ansicht, dass Benutzer dieses Video nicht erwarten, sondern Benutzern etwas Metadaten (einschließlich Größe, Erster Frame, Titelliste, Dauer usw.) zur Verfügung stellen.
Auto: Alle vor -laden.
(3) Autoplay -AttributEin weiteres Attribut, das vom Namen abhängt, kennt den Zweck. Mit dem Autoplay -Attribut wird das Video festgelegt, ob das Video automatisch abgespielt wird, was ein boolescher Attribut ist. Wenn es erscheint, bedeutet dies, dass eine automatische Wiedergabe, was bedeutet, dass sie nicht spielt.
<Video -Breite = 658 Höhe = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = None> </Video >
Beachten Sie, dass der Wert von Booleschen Attributen in HTML nicht wahr und falsch ist. Die korrekte Verwendung ist, dass die Verwendung dieses Attributs im Etikett true angibt. ));
(4) Schleifenattribut<Video -Breite = 658 Höhe = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay Loop = Loop> </Video >
Auf einen Blick ist klar, dass das Schleifenattribut auch verwendet wird, um festzustellen, ob das Video verbreitet wird, was auch ein boolescher Attribut ist.
(5) Steuerungsattribut<Video -Breite = 658 Höhe = 444 src = http: //www.youname.com/images/first.mp4 poster = http: //www.youname.com/images/first.png toplay preload = Keine Steuerelemente = Controls = Controls = Controls = </Video>
Steuerelementattribute werden verwendet, um dem Browser anzuzeigen, um anzuzeigen, dass der Seitenproduzent kein Skript verwendet, um einen Wiedergabesteuerungs -Controller zu generieren, und der Browser muss die Wiedergabesteuerungsleiste verwenden.
Die Kontrollleiste muss eine Play Pause Control, Play Progress Control, Volumensteuerung usw. enthalten.
Die Standard -Wiedergabesteuerleiste jedes Browsers unterscheidet sich auf der Schnittstelle. Aufgrund der seltsamen Probleme meines Browsers ist das Video -Label von Firefox und Safari nicht normal, sodass diese beiden nur Screenshots online finden können.
(6) Breitenattribute und HöhenattributeDas universelle Attribut gehört zum Etikett, daher müssen dies nicht sagen.
(7) Quell -Tag<Video -Breite = 658 Höhe = 444 Poster = http://www.youname.com/images/firs/png autoplay = autoplay preload = Keine Steuerelemente> <quelle com/images /firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </Video>
Die Quellbezeichnung wird verwendet, um mehrere Optionen anzugeben (da Audio -Tags auch diese Beschriftung enthalten können. Verwenden Sie daher das Medium anstelle von Video) (der Browser kann am Ende nur eine auswählen), wenn Sie SRC -Attribute verwenden.
Der Browser kann erkennen, ob das von der Quelletikett angegebene Video abgespielt werden kann (möglicherweise wird das Video -Format nicht unterstützt, das Video existiert nicht usw.). Diese Methode wird hauptsächlich für verschiedene Browser verwendet. Das Quell -Tag selbst bedeutet keine Bedeutung und kann nicht alleine erscheinen.
Dieses Etikett enthält drei Attribute: SRC, Typ und Medien.
SRC -Attribute: Wird verwendet, um die Adresse der Medien festzulegen, die wie die Videomodelle.
Typattribut Typ: Es wird verwendet, um den Typ des SRC -Attributs angegebene Medien zu erklären und dem Browser zu bestimmen, ob ein solches Medienformat unterstützt werden soll, bevor die Medien erhalten werden.
Medienattribute: Es wird verwendet, um zu erklären, wo die Medien im Medium verwendet werden, und der Standardwert ist alles, wenn es nicht gesetzt ist, was bedeutet, dass alle Medien unterstützt werden. Denken Sie an das Medienattribut des <Styles> -Label? Das gleiche.
(8) Ein vollständiges Beispiel<Video -Breite = 658 Höhe = 444 Poster = http://www.youname.com/images/firs/png autoplay = autoplay preload = Keine Steuerelemente> <quelle com/images /firtst.ogv/> <source src = http://www.youname.com/images/first.ogg/> </Video>
Dieser Code definiert ein Video auf der Seite. Pixel, die Höhe von 240 Pixel Essenz
Die erste Auswahl der Videoadresse der ersten Quellbezeichnung, der SRC -Attributwert, die Videokategorie ist OGG Video, der Videocodierungsdecoder ist Theora, der Audio -Codierungsdecoder ist Vorbis, das Wiedergabedium ist das Display. Die Adresse ist nicht mehr, dass die Videoadresse nicht mehr müde ist. Wenn Sie mit dem IE kompatibel sein müssen, können Sie den Etikettssatz des Flash -Players nach dem letzten Quelletikett hinzufügen oder einen kleinen JavaScript -Code verwenden.
ZusammenfassenDie oben genannte Zusammenfassung der von Xiaobian vorgestellten HTML -Webseite ist die Methode zum Einfügen des Videos. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!