Die Verwendung von Audio- und Video-Tags in HTML5

Dieser Artikel stellt hauptsächlich die Verwendung von Audio- und Video-Tags in HTML5 vor. Jetzt kann ich ihn mit Ihnen teilen.

WeChat-Sharing-Seite Es gibt viele Sprachwiedergabe- und Videoanzeigen und viele verwandte Methodenattribute wurden bisher nicht berührt. Nehmen Sie sie also jetzt auf!

1. Verstehen Sie zunächst die grundlegenden Informationen zu den beiden Tags:

Die grundlegenden Attribute der beiden Tags:

SteuerelementeAudio/Video festlegen oder zurückgeben, ob Steuerelemente (wie Wiedergabe/Pause usw.) angezeigt werden sollen crossOrigin Audio-/Video-CORS-Einstellungen festlegen oder zurückgeben currentSrc Gibt die URL des aktuellen Audio-/Videomaterials zurück currentTimeEinstellung oder Gibt die aktuelle Wiedergabeposition im Audio/Video zurück (in Sekunden) defaultMutedLegen Sie fest oder geben Sie zurück, ob das Audio/Video ist standardmäßig stummgeschaltet defaultPlaybackRateLegt die Standard-Wiedergabegeschwindigkeit von Audio/Video fest oder gibt sie zurück DauerGibt die Länge des aktuellen Audios/Videos in Sekunden zurück (Anzahl)

Eigenschaft	Beschreibung
audioTracks	Gibt ein AudioTrackList-Objekt zurück, das die verfügbaren Audiospuren darstellt
Autoplay	Legen Sie fest oder geben Sie zurück, ob Audio/Video sofort nach Abschluss des Ladevorgangs abgespielt werden soll
gepuffert	Zurück zur Angabe: Das TimeRanges-Objekt des gepufferten Teils des Audio-/Video-
Controllers	gibt das MediaController-Objekt zurück, das den aktuellen Mediencontroller des Audio-/Video-
beendet	Gibt zurück, ob die Audio-/Videowiedergabe beendet wurde
Fehler	Gibt einen MediaError zurück, der den Audio-/Videofehler angibt status Object
loop	Legt fest oder gibt zurück, ob das Audio/Video am Ende erneut abgespielt werden soll
mediaGroup	Legen Sie die Kombination fest, zu der das Audio/Video gehört, oder geben Sie sie zurück (wird zum Verbinden mehrerer Audio-/Videoelemente verwendet).
stummgeschaltet	Legen Sie fest, ob das Audio gehört, oder geben Sie es zurück /Video ist stummgeschaltet
Netzwerkstatus	Gibt den aktuellen Netzwerkstatus von Audio/Video zurück
Pause	Audio einstellen oder zurückgeben/ Ob das Video angehalten ist
Wiedergaberate	Geschwindigkeit der Audio-/Videowiedergabe festlegen oder zurückgeben
abgespielt	Gibt ein TimeRanges-Objekt zurück, das den abgespielten Teil des Audios/Videos darstellt.
preload	Legt fest oder gibt zurück, ob das Audio/Video abgespielt werden soll geladen werden, nachdem die Seite geladen wurde
readyState	Gibt den aktuellen Bereitschaftsstatus des Audios/Videos zurück
seekable	Gibt den adressierbaren Teil des Audio-/Video-TimeRanges-Objekts zurück
suchend	Gibt zurück, ob der Benutzer in Audio/Video sucht
src	Legt die aktuelle Quelle von Audio-/Videoelementen fest oder gibt sie zurück.
startDate	Gibt ein Datum zurück, das die aktuelle Uhrzeit darstellt offset Object
textTracks	Gibt eine TextTrackList zurück, die verfügbare Textspuren darstellt. Object
videoTracks	Gibt eine Darstellung zurück Verfügbare Textspuren Das VideoTrackList-Objekt der Videospur
Lautstärke	legt die Audio-/Videolautstärke fest oder gibt sie zurück

zwei Beschriftungen Die grundlegende Methode:

Methode	Beschreibung

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

addTextTrack()Neue Textspur zu Audio/Video hinzufügen canPlayType()Erkennen, ob der Browser den angegebenen Audio-/Videotyp abspielen kannload()Das Audio/Video neu laden Elementplay()Wiedergabe von Audio/Video startenpause()Pause spielt gerade Audio/Video

Ereignisse in beiden Tags:

Ereignis	Beschreibung
Abbruch	Wenn das Laden von Audio/Video abgebrochen wurde
canplay	Wenn der Browser Audio/Video abspielen kann
canplaythrough	Wenn der Browser abspielen kann durch Bei Wiedergabe ohne Pause aufgrund der Pufferung
Daueränderung	Wenn die Audio-/Videodauer geändert wurde
geleert	Wenn die aktuelle Playlist leer ist
beendet	Wenn die aktuelle Playlist beendet ist
Fehler	Wenn beim Laden von Audio/Video ein Fehler auftritt
geladene Daten	Wenn der Browser das Audio/Video geladen hat Wenn der aktuelle Frame
geladene Metadaten	Wenn der Browser die Metadaten des Audios/Videos geladen hat
Ladestart	Wenn der Browser startet Suche nach Audio/Video
Pause	Wenn das Audio/Video angehalten wurde
Wiedergabe	Wenn das Audio/Video gestartet wurde oder nicht mehr pausiert ist
Wiedergabe	Wenn das Audio/Video gestartet wurde gestartet oder ist nicht mehr pausiert Pufferung während der Pause oder bereit nach dem Stoppen
Fortschritt	Wenn der Browser Audio/Video herunterlädt
ratechange	Wenn sich die Wiedergabegeschwindigkeit des Audios/Videos geändert hat
gesucht	Wenn der Benutzer an eine neue Position in verschoben/gesprungen ist das Audio/Video
Suche	Wenn der Benutzer beginnt, sich im Audio/Video zu einer neuen Position zu bewegen/zu springen
blockiert	Wenn der Browser versucht, die Mediendaten abzurufen, die Daten jedoch nicht verfügbar sind
Suspendieren	Wenn der Browser absichtlich keine Daten abruft die Mediendaten
Zeitaktualisierung	Wenn sich die aktuelle Wiedergabeposition geändert hat
Lautstärkeänderung	Wenn die Lautstärke hat sich geändert
Warten	Wenn das Video stoppt, weil das nächste Bild gepuffert werden muss

2. Verwendung im Projekt: Wenn das Video nicht geladen ist, muss das erste Bild des Bildes hier aus dem Hintergrund übertragen werden. das Originalvideo-Tag Es gibt ein Attributposter, das speziell zum Anzeigen des ersten Bildes des Videos verwendet wird, das dem Video-Titelbild entspricht. Das Poster-Attribut wird verwendet, um den Poster-Attributwert des Videos festzulegen oder zurückzugeben. Dieses Attribut beschreibt das Bild, das angezeigt wird, wenn das Video geladen wird oder bevor der Benutzer auf die Wiedergabeschaltfläche klickt. Wenn dieses Attribut nicht enthalten ist, wird stattdessen das erste Bild des Videos verwendet.

<p class="newsInfo" v-for=" item in newsFragment">
<p class="text">{{item.fragment_text_describe}}</p>
<p v-if="item.fragmentFile" v-for="items in item.fragmentFile">
<img v-if="items.fragment_type==1" :src="items.fragment_url" alt="">
<video v-else :poster="items.fileCover" controls :src="items.fragment_url"></video>
</p>
</p>

Bei der Audiowiedergabe unterstützt der Browser diesen Audiotyp möglicherweise nicht. Sie müssen also ein Urteil fällen: Überprüfen Sie mit der Methode canPlayType(), ob der Browser den angegebenen Audio-/Videotyp abspielen kann . Die Methode canPlayType() kann einen der folgenden Werte zurückgeben:
„wahrscheinlich“ – der Browser unterstützt diesen Audio-/Videotyp höchstwahrscheinlich
„vielleicht“ – der Browser unterstützt möglicherweise diesen Audio-/Videotyp

"" - (leere Zeichenfolge) Der Browser unterstützt diesen Audio-/Videotyp nicht

Syntax verwenden:

audio.canPlayType("mp3"))

Verwandte Empfehlungen:

Umfassendes Verständnis des sessionStorage-Objekts von HTML5

Detaillierte Videoerklärung der HTML5-Video-Tag-Operation

Das obige ist der detaillierte Inhalt vonDie Verwendung von Audio- und Video-Tags in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!