15

HTML5 オーディオ プレーヤーのコレクションを一覧表示する単一ページの Web サイトがあります。問題は、次のブラウザーがコンテンツ (mp3 および ogg) のプレダウンロードを開始するため、サイトが遅くなることです。

Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)

基本コードを使用してプレーヤーを実装します。ブラウザがオーディオ ファイルをプレダウンロードするのを防ぎ、再生をクリックしたときにのみ動作するようにする方法はありますか?

<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>
4

2 に答える 2

32 
<audio controls="controls" preload="none">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

注preload="none"---VIDEOHTML5およびAUDIOHTML5で使用できます。

preload属性は、InternetExplorerとOperaを除くすべての主要なブラウザでサポートされています。

于 2012-08-03T22:46:06.130 に答える
3

MSIE は依然としてすべての Web トラフィックの約 30% を占めているため、preload="none"ソリューションの一部に過ぎません。この問題が発生したいくつかのページで、ページ ヘッダーに小さなスクリプトを追加しました。

<script type="text/javascript">
function addAudio(t) {
  var l=t.innerHTML.length;
  var audioName=t.parentElement.id;
  if( t.children.length==0) {
    t.innerHTML=t.innerHTML+'&nbsp; &nbsp; <audio controls="controls"><source src="'+
      audioName+'.ogg" type="audio/ogg" /><source src="'+
      audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
  }
}
</script>

次に、DHMTL を使用してオーディオ タグを動的に追加します。次に例を示します。

<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>

これが行うことは、テキスト スパンを含むリスト項目を定義することです。閲覧者がスパンされたテキストをクリックすると、JavaScript が起動して<audio>タグを追加します。onmouseoverホバー時にオーディオ タグが追加されるように、代わりに属性を使用することもできます。

preload必要に応じて、生成されたコードに属性を追加します。これは単純なアプローチですが、Web ページで既にjQueryを使用している場合は、これが洗練された代替手段を提供することに注意してください。

于 2012-08-04T09:25:11.087 に答える