4

<audio> タグと FF/Chromium に関して厄介な問題があります。メディアが期待どおりに再生されないからです。Operaはそれを正しく処理しているようです。

対応する HTML5 <audio> タグを使用して再生するオーディオ メディアがあります。<source> タグには、オーディオのみの OGG コンテナー内のメディアが含まれます。ただし、ファイル拡張子 ogg はsrc 属性にないため、 srcリンクはhttp : // localhost:1234/a/b/cdefg/Xyzのようになります (リダイレクトを使用して実際のメディア ファイルを取得する RESTful API)。

次のコードは、HTML5 プレーヤーを表示する Web ページの一部です。

    <div class="mainContent">
    <audio id="aud1" height="360" width="640" autoplay="false" controls="controls" tabindex="0">
    <source type="audio/ogg" src="http://localhost:1234/a/b/cdefg/Xyz"></source>
    Your browser does not support HTML5.
    </audio>
    <div class="divider"></div>
    <a class="homeLink" href="/index.html">Take me back to the Homepage</a>
    </div>

再生中のメディアは、間違いなく音声のみの OGG ファイルです。

このコードを Ubuntu 10.04 FF5.0、Chromium 12.0.742.91 (87961)、および Opera 11.50 でテストしたところ、次の結果が得られました。

  1. FF: 再生しない
  2. Chromium: 再生しない
  3. オペラ：わかりました

HTMLMediaElement のさまざまな属性 (属性: networkState、readyState、参照) を表示する小さなスクリプトを統合し、次の結果を得ました。

  1. FF => networkState: NETWORK_LOADED (メディア ソースの読み込みが完了)、readyState: HAVE_NOTHING (再生可能なメディアがない)
  2. Chromium => networkState: NETWORK_LOADED (メディア ソースの読み込みが完了)、readyState: HAVE_NOTHING (再生可能なメディアがない)
  3. Opera => networkState: NETWORK_IDLE、readyState: HAVE_ENOUGH_DATA

(さまざまな状態の説明は、Safari Dev サイトからのものであることに注意してください: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html )

オーディオのみの OGG ファイル ( http://en.wikipedia.org/wiki/File:Tromboon-sample.oggなど) を直接指すsrcを挿入すると、期待どおりに動作します。FF と Chromium には、最終的なファイル名が含まれていないリンクに問題があるように見えますか?

誰かがこれについてアイデアやヒントを持っていますか?

乾杯、クリス

4

1 に答える 1

1

すでに修正されていることは承知していますが、MIME タイプを見落としていないことを確認してください。

HTML5<video>

.ogv
video/ogg

.webm
video/webm

HTML5<audio>

.oga
audio/ogg

.mp3
audio/mp3

HTML5<video> <audio>

.mp4
video/mp4

.ogg
application/ogg
于 2012-08-24T04:12:49.027 に答える