2

<audio> と <video> を preload="none" で使用し、Javascript から再生しようとすると、Firefox と Chrome で異なる結果が得られます。

preload="auto" または preload="metadata" を使用していたとしましょう:

audio.src = "filename";
audio.play();

Firefox と Chrome の両方で問題なく動作するようですが、preload="none" を使用してから Chrome dossent play を使用したいと考えています。

だから私は preload="none" でこのコードを試しています:

audio.src = url;

audio.load();

audio.addEventListener('canplay', function(e) {
   audio.play(); // For some reason this dossent work in Firefox
}, false);

audio.play(); // Added this so Firefox would play

それが正しい方法かどうかはわかりません。

使用しています：Firefox 20.0.1 Chrome 25.0.1364.172 m

デモを作りました : http://netkoder.dk/test/test0217.html

編集 ：

2 番目のオーディオ プレーヤー (デモ ページ) では、preload="none" を使用する場合、load() を使用する必要があるようです。しかし、 load() の直後に play() を使用するのは正しいですか、それともイベントを使用してファイルがロードされるのを待ってから再生するのが正しい方法ですか?

3 番目のオーディオ プレーヤーでは、addEventListener() と一緒に使用すると、Firefox 20.0.1 が canplay イベントを正しくサポートしていないようです。 canplayが機能する方法になります。.oncanplay を使用すると機能します。

したがって、次のコードが機能するようです：

  function afspil2(url) {

     afspiller2.src = url;
     afspiller2.load(); // use load() when <audio> has preload="none"
     afspiller2.play();

  }

  function afspil3(url) {

     afspiller3.src = url;
     afspiller3.load(); // use load() when <audio> has preload="none"

     //afspiller3.addEventListener('canplay', function() { // For some reason this dossent work correctly in Firefox 20.0.1, its triggers after load() and when scrubbing
     //   afspiller3.play();
     //}, false);

     afspiller3.oncanplay = afspiller3.play(); // Works in Firefox 20.0.1

  }

変更を含めるようにデモを更新しました: http://netkoder.dk/test/test0217.html

afspil3() 関数 dossent 内に addEventListener を追加する私の方法は、最初に関数が呼び出されたときに addEventListener 内のコードが 1 回呼び出されるため、良いようです。関数が 2 回目に呼び出されると、addEventListener 内のコードが 2 回呼び出され、次に 3 回呼び出されます。

4

2 に答える 2

3

これは、タグに必要な属性またはタグaudioが欠落しているためです。あなたのデモにそれらを追加したとき、3 人のプレーヤーすべてがすぐに Chrome と FF の両方で動作し始めました。src<source>

また、私は最近、 が空の文字列であってはならないことを発見しsrc、その後 JS で変更しました。srcHTML で を設定できない理由がある場合、最良の代替手段である IMO は、 audioJavascript で要素を作成することです。

var audio = new Audio();
audio.src = url;
audio.controls = true;
audio.preload = false;
// and so on

編集：わかりました。Chrome では、HTMLが変更されたときに再生前preload="none"に呼び出す必要があるようです。2番目はプリロードされないため、関数は次のようにする必要があります:load()srcaudio

  function afspil2(url) {
     afspiller2.src = url;
     afspiller2.load(); // add load call
     afspiller2.play();
  }

それから、Firefoxでは3つ目の関数のようにpreload="auto";、イベントにイベントを付ける際に設定が必要なようです。canplay

  function afspil3(url) {
     afspiller3.src = url;
     afspiller3.preload = "auto";
     afspiller3.load();
     afspiller3.addEventListener('canplay', function(e) {
        this.play(); // For some reason this dossent work in Firefox
     }, false);
  }

それは非常に奇妙に思えますが、私はそれを複数回テストしました。そのたびに、呼び出された場合preload="auto"は再生されますが、呼び出されなかった場合は再生されませんでした。preload="none"HTMLタグにもあった2番目のプレーヤーには必要ないことに注意してください。

<audio>最後に、ページに複数の要素がある場合、Chrome は奇妙な動作をします。3 人のプレーヤー全員で、ページをリロードして「大きな電子」リンクをクリックすると、正しく再生されます。

2 人目または 3 人目のプレーヤーでリロードしてから「ヨーダ」をクリックしても何も起こりませんが、最初のプレーヤーでは再生されます。しかし、何らかの手段 (再生ボタンまたはいずれかのリンク) によってトップ プレーヤーが最初に再生されると、他の 2 つの "ヨーダ" リンクが突然機能します。

また、リロード後に最初に 2 番目または 3 番目の「ヨーダ」リンクをクリックしてからトップ プレーヤーをクリックすると、トップ プレーヤーが停止した後、以前にクリックされた (以前は再生されなかった) 「ヨーダ」の再生が開始されます。 .

彼らには解決すべきバグがいくつかあると言えば十分です。

于 2013-05-04T02:42:17.567 に答える
1

私の意見では、正しい方法はhttp://mediaelementjs.com/のような既存のソリューションを使用することを意味します

js を使用してオーディオとビデオを再生する最良の方法の詳細に本当に興味がある場合は、ソースを参照してください: https://github.com/johndyer/mediaelement/tree/master/src/js

https://github.com/johndyer/mediaelement/blob/master/src/js/me-mediaelements.js

于 2013-05-05T07:58:21.203 に答える