Bevor HTML5 herauskam, wurden Online-Audio und -Video mit Hilfe von Flash oder Tools von Drittanbietern realisiert. Jetzt unterstützt auch HTML5 diese Funktion. In einem Browser, der HTML5 unterstützt, können Audio- und Videodateien abgespielt werden, ohne dass Plug-Ins installiert werden müssen. Die native Unterstützung von Audio und Video verleiht HTML5 ein enormes Entwicklungspotenzial.
Audioeinbettung in HTML (herkömmliche Methode): Obwohl diese Methode implementiert werden kann, erfordert sie, dass der Browser Flash unterstützt, und kann nicht gesteuert werden, sodass die Implementierung sehr mühsam ist.
<object height=200 width=200 data=2_1.swf ></object><embed src=2_1.mp4 type=>
Das bedeutet also, dass es bei HTML5 ein großes Problem gibt, nämlich die Kompatibilität. Audio
Von HTML5 unterstützte Audioformate: VideoVideoformat:
Aus dem oben Gesagten geht hervor, dass HTML5 offenbar einige Formate unterstützt. Wenn Sie also feststellen, dass Audio und Video bei Verwendung von HTML5 nicht angezeigt werden, sollte es ein Problem sein, dass das Format nicht unterstützt wird. Hinweis: MP4 hat 3 Kodierungen, mpg4(xdiv),,mpg4(xvid), avc(h264) Nur h264 ist die anerkannte MP4-Standardkodierung (ich täusche mich auch hier, andere Formate haben nur Ton, aber keine Bilder.) Wenn Sie Wenn Sie auf ein solches Problem stoßen, verwenden Sie einfach einen Videoformatkonverter, um das Format zu konvertieren, und alles ist in Ordnung.
Audio ist sehr einfach zu implementieren: Die Symbolleiste verwendet hier die Standardsymbolleiste des Browsers.
<audio src=htmls/1.mp3 Controls=controls loop=loop preload=auto >Ihr Browser unterstützt das Videoelement nicht</audio>
Obwohl die Browser-Standardeinstellung für Videos verwendet werden kann, ist eine private Anpassung nicht möglich. Aus technischer Sicht müssen Sie daher noch lernen, wie Sie Ihre eigenen Tools zum Implementieren von Funktionen erstellen (Audio kann sich auch auf diese Methode beziehen).
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>Video auf Webseite platzieren</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 Controls=Controls Loop=Loop Preload=Auto >Ihr Browser unterstützt das Videoelement nicht</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 Controls=controls loop=loop poster=3.jpg>Ihr Browser unterstützt das Audioelement nicht <!-- MP4 hat 3 Kodierungen, mpg4(xdiv),,mpg4(xvid), avc(h264), Nur h264 ist die anerkannte MP4-Standardkodierung--></video><div id=progress></div><!-- Lautstärkeregelung--><input id=volume type=range min=0 max=1 step = 0.1 onchange=Volume(this)><!-- Raten- und Zeitfortschrittsinformationen--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>Play</button><button onclick=Fast()>Schneller Vorlauf</button><button onclick=Slow()>Langsamer Vorlauf</button><button onclick=Prev() >Zurück</button><button onclick=Next()>Vorwärts</button><button onclick=Muted(this)>Stummschalten</button></body></html>
Anzeige (HTML) und Funktionsimplementierung (JS) werden getrennt und von außen importiert.
ControlBar.js
//Skript verwenden, um Browser-Tag-Unterstützung zu erkennen var support = !!document.createElement(audio).canPlayType;if (!support) {alert(Ihr Browser unterstützt die Wiedergabe dieses Videos nicht);}//Globales Videoobjekt definieren var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*Forward: one minute*/function Next() {e1.currentTime+=10; //Eigenschaft currentTime festlegen, 10 Sekunden vorspulen}/*Rücklauf: eine Minute*/function Prev() {e1.currentTime-=10; //Eigenschaft currentTime festlegen, 10 Sekunden zurückspulen}/ *Play/Pause*/Funktion Play(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*Langsamer Vorlauf: Wenn es kleiner oder gleich 1 ist, wird es jedes Mal nur um 0,2 verlangsamt; wenn es größer als 1 ist, verringert es sich jedes Mal um 1 */Funktion Slow(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *Langsamer Vorlauf: Wenn er kleiner oder gleich 1 ist, wird er jedes Mal nur um 0,2 verlangsamt. Wenn er größer als 1 ist, verringert er sich jedes Mal um 1 */Funktion Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}function fps2fps(fps ){if(fps<1){return fps.toFixed(1);}else{return fps;}}/*Mute*/function Muted(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*Lautstärke anpassen*/Funktion Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* Fortschrittsinformationen: Steuern Sie den Fortschrittsbalken und zeigen Sie die Fortschrittszeit an*/Funktion Progress( ) {var p1=document.getElementById(progress);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}function s2time(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ s:s);}/* Fügen Sie nach dem Laden der Webseite die Fortschrittsverarbeitungsfunktion zum Timeupdate-Ereignis des Videoobjekts hinzu*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*Fügen Sie den Fortschritt hinzu window.onload Ereignisverarbeitungsfunktion */window.addEventListener(load,Progress);Implementierte Funktionen: Wiedergabe, Pause, schneller Vorlauf, langsamer Vorlauf, Vorlauf, Rücklauf, Lautstärkeregelung, Fortschrittsbalken und Zeitanzeige. Es ist ersichtlich, dass durch die Eigenschaften und Methoden von Audio oder Video komplexere Funktionen erreicht werden können.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.