Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern

Kompatibilitätsprobleme beim Einfügen von Audiodateien in HTML und beim Abspielen in Browsern
Lassen Sie uns über einige Probleme sprechen, die bei mir nach dem Einfügen von Audiodateien in HTML (beim Abspielen von MP3-Dateien) aufgetreten sind:

1. <embed type="audio/mp3" src="" autostart=true loop=false></embed>
Problem: Es funktioniert gut auf IE8 (über Media Player-Plugin), aber nicht auf IE6 und IE7
Sie müssen das QuickTime-Plugin installieren, um es in Firefox abspielen zu können
Chrome konvertiert es in das Tag <vidio> in HTML5, das zwar abgespielt werden kann, aber auf dem gesamten Bildschirm einen Bluescreen verursacht.
Opera wird nicht automatisch abgespielt

2. <embed type="audio/midi" src="" autostart=true loop=false></embed>
Problem: Das Video wird unter IE6 und IE7 nicht richtig abgespielt, unter IE8 funktioniert es jedoch einwandfrei.
Normal unter Firefox
Für die ordnungsgemäße Wiedergabe ist für Chrome ein fehlerhaftes QuickTime-Plug-In erforderlich
Opera wird nicht automatisch abgespielt

3. <Objektdaten="" />
Problem: Das Video kann nicht auf IE6 und 7 abgespielt werden. IE8 zeigt die Meldung „Articx wird nicht normal verwendet“ an.
Normal unter Firefox
Normal unter Chrome
Opera unterstützt nicht

4. <audio src="" type="audio/mp3" />
Problem: HTML5-Tags werden nur von Chrome unterstützt

5.

Code kopieren
Der Code lautet wie folgt:

<Audio-Autoplay>
<Quelle src="" Typ="audio/mp3" />
<embed src="" type="audio/mp3"/>
</audio>

Problem: IE6 und IE7 unterstützen es nicht, andere Browser jedoch schon. Opera kann es nicht automatisch abspielen.

6. <embed src=""><noembed><bgsound src=""></noembed>
Problem: IE6 und IE7 werden nicht unterstützt, andere Browser werden unterstützt, Opera kann nicht automatisch abspielen

Basierend auf dem oben Gesagten habe ich die folgende Methode übernommen (ausgeführt unter jQuery):

Code kopieren
Der Code lautet wie folgt:

wenn (navigator.userAgent.indexOf("Chrome") > -1) {
Wenn es Chrome ist:
<audio src="" type="audio/mp3" autoplay="autoplay" hidden="true"></audio>
}sonst wenn (navigator.userAgent.indexOf("Firefox")!=-1) {
Wenn es Firefox ist:
<embed src="" type="audio/mp3" hidden="true" loop="false" Mastersound></embed>
}else if (navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all) {
Wenn es IE(6,7,8) ist:
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="Src" value="" /></object>
}sonst wenn (navigator.appName.indexOf("Opera")!=-1) {
Wenn es Oprea ist:
<embed src="" type="audio/mpeg" loop="false"></embed>
}anders{
<embed src="" type="audio/mp3" hidden="true" loop="false" Mastersound></embed>
}

oder

Code kopieren
Der Code lautet wie folgt:

var ua = navigator.userAgent.toLowerCase();
wenn(ua.match(/msie ([\d.]+)/)){
jQuery('#__alert_sound').html('<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="Src" value="/sounds/alert/1.mp3" /></object>');
}
sonst wenn(ua.match(/firefox\/([\d.]+)/)){
jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" type="audio/mp3" hidden="true" loop="false" mastersound></embed>');
}
sonst wenn(ua.match(/chrome\/([\d.]+)/)){
jQuery('#__alert_sound').html('<audio src="/sounds/alert/1.mp3" type="audio/mp3" autoplay="autoplay" hidden="true"></audio>');
}
sonst wenn (ua.match(/opera.([\d.]+)/)){
jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" hidden="true" loop="false"><noembed><bgsounds src="/sounds/alert/1.mp3"></noembed>');
}
sonst wenn(ua.match(/version\/([\d.]+).*safari/)){
jQuery('#__alert_sound').html('<audio src="/sounds/alert/1.mp3" type="audio/mp3" autoplay="autoplay" hidden="true"></audio>');
}
anders {
jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" type="audio/mp3" hidden="true" loop="false" mastersound></embed>');
}

<<:  Einige Erfahrungen in der Selbstkultivierung von Künstlern

>>:  Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die vue3.0-Projektarchitektur erstellen

Artikel empfehlen

JavaScript zum Implementieren einer zeitlich begrenzten Flash-Sale-Funktion

In diesem Artikel wird der spezifische JavaScript...

Detaillierte Erklärung der Verwendung des Linux-Befehls nslookup

[Wer ist nslookup?] 】 Der Befehl nslookup ist ein...

Detailliertes Installationstutorial für MySQL 5.7 unter CentOS 6 und 7

Für die Entwicklung benötigen Sie immer Daten. Al...

Detaillierte Erläuterung der drei Methoden zum Abfangen von JS-Zeichenfolgen

JS bietet drei Methoden zum Abfangen von Zeichenf...

MySQL5.6.31 winx64.zip Installations- und Konfigurationstutorial

#1. Herunterladen # #2. Entpacken Sie die Datei l...

Detaillierte Erklärung zum Anzeigen der MySQL-Speichernutzung

Vorwort Dieser Artikel stellt hauptsächlich die r...

MySQL 8.0.18 verwendet Klon-Plugin, um die MGR-Implementierung neu zu erstellen

Angenommen, ein Knoten im Drei-Knoten-MGR ist abn...

So installieren Sie Jenkins auf CentOS 8

Um Jenkins auf CentOS 8 zu installieren, müssen S...

Schritte für Docker zum Erstellen eines eigenen lokalen Image-Repositorys

1. Umgebung und Vorbereitung 1. Ubuntu 14.04 2.Do...

Grafisches Tutorial zur Installation von CentOS7 auf VMware 15.5

1. Erstellen Sie eine neue virtuelle Maschine in ...