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

MySQL-Paket für Abfrage ist zu groß – Problem und Lösung

Problembeschreibung: Fehlermeldung: Ursache: com....

Vue definiert private Filter und grundlegende Nutzung

Die Methoden und Konzepte privater und globaler F...

So konfigurieren Sie NAS unter Windows Server 2019

Vorwort Dieses Tutorial installiert die neuste Ve...

So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus

Neulich habe ich rsync verwendet, um eine große D...

Eine kurze Zusammenfassung meiner Erfahrungen beim Schreiben von HTML-Seiten

Es sind drei oder vier Monate vergangen, seit ich ...

Mit CSS3 erstellte Buchseitenumblättereffekte

Ergebnis:Implementierungscode: html <!-- Wenn ...

Schritte zum Upgrade des Ubuntu 16.04-Kernels

1. Umwelt Ubuntu 16.04 läuft auf einer virtuellen...

So begrenzen Sie den Wertebereich von Objektschlüsseln in TypeScript

Wenn wir TypeScript verwenden, möchten wir das vo...

Unvollständige Lösung für die Verwendung von Eingabetyp=Textwert=str

Ich bin heute auf ein sehr seltsames Problem gesto...

js Promise-Methode zur gleichzeitigen Steuerung

Inhaltsverzeichnis Frage Hintergrund Idee & U...

So stellen Sie HTTPS kostenlos auf Tencent Cloud bereit

Als ich kürzlich ein WeChat-Applet schrieb, erfor...

So verwenden Sie Mixins in Vue

Inhaltsverzeichnis Vorwort Anwendung Zusammenfass...