html5でaudioタグを使って、ユーザーのことなる環境に配慮してマルチsourceにすると、再生できないブラウザがでてきてしまいます。
たとえば先日試した環境ですと、operaとfirefoxはOKでsafariが駄目でした。
駄目というのは、sourceの順番が変わると再生がされないということです。
つまり1番目に置く以外は再生されないということです。
また、ネットで検索してみると、http://www.html5.jp/html5doctor/native-audio-in- … のようにまったく逆の症状になるケースもあるようです。おそらく同じブラウザでもバージョンが違うからでしょう。(リンクのブラウザは私が試したのより昔のブラウザです)
これらから推測するに、たとえflashの代替ソースを末尾につけても、同様の症状になるのではと考えられます。ではflashを1番目に置いたら?それならaudioタグを使う意味がほとんどないような気がしますし、そんな使い方をされている先達は知りません。
みなさんはこのオーディオ要素(ビデオ要素も同様なのか?)をどうとらえていて、使うならどう使いますか?
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
[[audio]].error.code
で再生エラーを拾って別のソースに切り替えてください
この回答への補足
ヒントありがとうございます。
onerror属性を使うことでうまく処理できました。
ですが[[audio]].error.codeの使い方を調べましたがよくわかりませんでした。
ifとeventlistnerでaudioオブジェクトにerrorがでてたらsrcを切り替えるのでしょうか?
そのerrorがでてたらsrcを切り替えるのコードの書き方がわかりません。functionとしてそのなかに何かコードを書くような気はしてるんですが。
私の勉強のために1例使い方をお示しいただけたら助かります。
自分でやるとエラーに対してソースを切り替えるのがどうも上手くいきません。
mp3を受け付けないブラウザ用に下記のコードを試しました。
これだとエラー検出とソースの交換が失敗します。
どうやったらうまくできるのでしょか?
お忙しいところご迷惑をおかけしておりますが、回答よろしくお願いします。
<script>
getElementByTagName('audio')[0].addEventListener('error', function(event) {
$("#audio_id").error(function () {
var mediaelement = document.getElementsByTagName("audio")[0];
if (mediaelement.networkState == mediaelement.NETWORK_NO_SOURCE) {
alert("error!!!");
}
}).$("source").attr("src") = 'music01.ogg';;
});
</script>
</head>
<body>
<audio id="audio_id" controls>
<source src="music02.mp3">
</audio>
</body>
</html>
No.1
- 回答日時:
videoタグ、audioタグについては、まだ歴史が浅いのでやはりいろいろ問題を抱えているようです。
またブラウザのアップデートによって状況は頻繁に変わるでしょう。
ここ最近実際に使用した経験をお話しいたします。
videoタグは質問者様のaudioタグの症状と同じです。
mp4を一番最初にしないとSafariは読み込んでくれません。
ちなみにvideoの場合、mp4とwebmの二つで、videoタグ対応ブラウザをほぼカバーできます。
audioタグについては、mp3とoggの順番に関わらず、Win、MacどちらのFx、Safariでも問題なく再生できています。
そこでIE8に対応する方法についてですが、javascriptのプラグインを使用しております。
(ほとんどのプラグインはIE6や7も同時に対応していますが、正直もう考慮に入れたくないです。
IE8がなければおそらくこんなことすらやっていません。)
videoのプラグインは色々あります。html5 video プレイヤーで検索するとまとめサイトなどができてくると思います。
ちなみにvideo.jsというプラグインを使用しました。
videoに比べて、audioのプラグインは少し少ないように感じます。
audio.jsというプラグインを使用しましたが、video.jsと関係がある訳ではなさそうです。
こういったjsのプラグインを使用する利点としては、Flashを別で制作する必要がないところが一番大きいでしょう。
JSのスクリプトを適応させるだけで、videoやaudioタグ非対応のブラウザでは、自動的にFlashで表示させてくれます。
また、もう一つの利点として、各ブラウザのコントロールの見た目を統一できることです。
デザインの変更も画像とCSSで簡単にできるものが多いと思います。
最後に使用したプラグインの挙動について少しお話しいたします。
video.jsの場合、video対応ブラウザではHTML5で表示されます。IE6~8ではFlashで表示されます。
audio.jsの場合は少し違います。audio.jsはaudioタグのmp3形式に対応していないとFlashで再生する事になります。
要するにFxでもFlashを使用することになりますので、逆にFlash Playerがインストールされていないと、Fxで再生されません。
両プラグインを使用した結果として、OS:Win、Mac/ブラウザ:IE6~9、Fx、Safari、Chrome、Opera/スマートフォン:iPhone、Android において、すべて問題なく再生されています。
以上、ご参考になればと思います。
詳しい情報ありがとうございます。参考にしたいとおもいます。
プラグインを使う事でflashにも対応できるから、変に再生されない事態はほぼ免れるということですね。
将来的に全ブラウザが安定してカバーするようになってプラグイン等抜きで使えるようになればいいのですが。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) angel ブラウザってなぜアプリのクラッシュやフリーズが多いのでしょうか?? 特定のサイトにこのブ 3 2023/02/06 20:17
- ASP・SaaS FC2 BLOG <AUDIO TAGを入れプレビューはOk テーンプレートを更新すると ✖ 1 2023/08/14 11:40
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- Amazon Amazonの配送先住所入力の自動入力機能が作動しなくなりました。 2 2022/10/06 08:58
- その他(IT・Webサービス) Chromeとかにしか対応していないウェブサイトに抗議したい いま令和5年だぞ 今使えるブラウザとい 5 2023/05/24 11:32
- スピーカー・コンポ・ステレオ ホームシアターの構築方法についてアドバイスをいただきたいです。 2 2023/08/06 18:28
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
- その他(ブラウザ) ブラウザを再起動してください 1 2023/06/22 09:05
- その他(ブラウザ) Androidの皆さん、Angle Browserって使っていますか?? このブラウザってなぜクラッ 1 2023/01/28 16:52
- ノートパソコン Windows 10 動作改善方法 6 2023/04/26 22:30
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
埼玉県内にUFOキャッチャーで突...
-
Tシャツの刺しゅうがチクチクす...
-
リーバイス?
-
<ruby>タグを使用したHTML文書...
-
ExcelのVBAでHTMLのタグ数を取...
-
XMLを作成してもタグしか表示さ...
-
キーフレーム
-
掲示板からIPアドレスってど...
-
Excel VBA 見本通りに...
-
aviutlで最後まで動画が読み込...
-
リンク先のURLを非表示にし...
-
ツールチップの表示時間の調整
-
GoogleChromeでレイアウトが左...
-
stray '\\240' in programのエ...
-
AfterEffectsでイージーイーズ...
-
指定URLを新しいウィンドウで開...
-
\\n \\r \\t について
-
ハイパーリンクからメニュー無...
-
表示中のURLなどをバッチファイ...
-
ddの行の折り返しをしたいです...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
埼玉県内にUFOキャッチャーで突...
-
リーバイス?
-
品質表示タグが付いてない商品
-
pixivの消えないブックマークタ...
-
ジャケットの革の素材がわかり...
-
ExcelのVBAでHTMLのソースのタ...
-
店の入口などについている、防...
-
Tシャツの刺しゅうがチクチクす...
-
VLANタグについて教えてください
-
下着などの洗濯タグ、どうやっ...
-
ExcelのVBAでHTMLのタグ数を取...
-
デメタグとは?
-
<属性/>
-
長いホームページで途中の位置...
-
これはなんと書いてありますか?
-
MacのMailでThunderbirdのタグ...
-
cssリファレンスについて
-
WAVファイルにタグ情報を付加す...
-
異なるメーカー機器同士のVLAN...
-
このタグの意味を教えてくださ...
おすすめ情報