HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題

HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題
HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの問題について説明します。

1. <embed type="audio/mp3" src="" autostart=true loop=false></embed>
問題: IE8 (メディア プレーヤー プラグイン経由) では正常に動作しますが、IE6 および IE7 では動作しません。
Firefoxで再生するにはQuickTimeプラグインをインストールする必要があります
ChromeはこれをHTML5の<vidio>タグに変換し、再生はできるものの画面全体がブルースクリーンになる。
Opera が自動再生されない

2. <embed type="audio/midi" src="" autostart=true loop=false></embed>
問題: ビデオは IE6 と IE7 では正しく再生されませんが、IE8 では正常に再生されます。
Firefoxでは正常
Chrome で正常に再生するには、不正な QuickTime プラグインが必要です
Opera が自動再生されない

3. <オブジェクトデータ="" />
問題: IE6 および 7 ではビデオを再生できません。IE8 では「Articx は正常に使用されていません」というメッセージが表示されます。
Firefoxでは正常
Chromeでは正常
Operaはサポートしていません

4. <audio src="" type="audio/mp3" />
問題: HTML5 タグは Chrome でのみサポートされています

5.

コードをコピー
コードは次のとおりです。

<音声自動再生>
<ソース src="" type="audio/mp3" />
<埋め込み src="" type="audio/mp3"/>
</音声>

問題: IE6 と IE7 はサポートしていませんが、他のブラウザはサポートしています。Opera は自動的に再生できません。

6. <embed src=""><noembed><bgsound src=""></noembed>
問題: IE6 と IE7 はサポートされていません。他のブラウザはサポートされていますが、Opera は自動的に再生できません。

上記を踏まえて、私は以下の方法を採用しました(jQuery で実行)。

コードをコピー
コードは次のとおりです。

(navigator.userAgent.indexOf("Chrome") > -1) の場合 {
Chromeの場合:
<audio src="" type="audio/mp3" autoplay="自動再生" hidden="true"></audio>
}そうでない場合 (navigator.userAgent.indexOf("Firefox")!=-1) {
Firefoxの場合:
<embed src="" type="audio/mp3" hidden="true" loop="false" マスターサウンド></embed>
}それ以外の場合 (navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all) {
IE(6,7,8)の場合:
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"><param name="AutoStart" value="1" /><param name="Src" value="" /></object>
}そうでない場合 (navigator.appName.indexOf("Opera")!=-1) {
Oprea の場合:
<埋め込み src="" type="audio/mpeg" loop="false"></埋め込み>
}それ以外{
<embed src="" type="audio/mp3" hidden="true" loop="false" マスターサウンド></embed>
}

または

コードをコピー
コードは次のとおりです。

var ua = navigator.userAgent.toLowerCase();
if(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>');
}
そうでない場合は、ua.match(/firefox\/([\d.]+)/)){
jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" type="audio/mp3" hidden="true" loop="false" mastersound></embed>');
}
そうでない場合、ua.match(/chrome\/([\d.]+)/)){
jQuery('#__alert_sound').html('<audio src="/sounds/alert/1.mp3" type="audio/mp3" autoplay="autoplay" hidden="true"></audio>');
}
そうでない場合、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>');
}
そうでない場合、ua.match(/version\/([\d.]+).*safari/)){
jQuery('#__alert_sound').html('<audio src="/sounds/alert/1.mp3" type="audio/mp3" autoplay="autoplay" hidden="true"></audio>');
}
それ以外 {
jQuery('#__alert_sound').html('<embed src="/sounds/alert/1.mp3" type="audio/mp3" hidden="true" loop="false" mastersound></embed>');
}

<<:  CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)

>>:  アーティストの自己啓発におけるいくつかの経験

推薦する

MySQL でコミットされていないトランザクションを見つけるための SQL の例の簡単な分析

以前、「MySQL でコミットされていないトランザクション情報を検索する方法」というタイトルのブログ...

MySQLがクエリキャッシュをキャンセルした理由

MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...

Nginx操作応答ヘッダー情報の実装

前提条件: ヘッダー情報操作をサポートするには、ngx_http_headers_module モジ...

Vue v-onディレクティブの使用について

目次1. イベントのリスニング2. イベントパラメータを渡す3. イベント修飾子ケース1: クリック...

SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...

Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。

序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...

Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...

docker を使用してコード サーバーをデプロイする方法

画像をプルする # docker pull codercom/code-server # Docke...

Docker プルタイムアウトの解決策

最近、Docker イメージのプルが非常に不安定です。遅く、タイムアウトすることがよくあります。 x...

CSSの幅と高さのデフォルト値の詳細な説明:autoと%

結論は幅の%: 包含ブロック(親要素)の幅に基づいて、親の制限を超える幅のパーセンテージを定義します...

MySQL 集計統計データの低速クエリの最適化

前面に書かれた注文テーブル、アクセス記録テーブル、商品テーブルなど、日常生活でデータベースを操作する...

MySql のスロークエリ分析とスロークエリログの開き方の詳細説明

最近はMySQLのパフォーマンス最適化についても研究しているので、今日の投稿は勉強ノートとしても使え...

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

イメージのアップロードとダウンロードに docker をプロキシするためのプライベート ライブラリとして nexus を使用する

1. Nexusの設定1. Dockerプロキシを作成する外部ネットワーク ウェアハウスからローカル...