9

私は jPlayer (jquery を使用した HTML5 ソング プレーヤー) を持っており、曲の xx 秒から曲の再生を開始します。

しかし問題は、最初に XX 秒バッファリングしてから再生を開始する必要があることです。これは帯域幅の無駄です。XX 秒からバッファリングを開始しないのはなぜですか?

ここに私が使用するコードがあります:

$("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            mp3: playList[0],
            volume: CUR_VOL
          }).jPlayer("play", 251);
        },
        swfPath: "js",
        supplied: "mp3",
        errorAlerts: false
      });

編集

最初の XX 秒のバッファリングを回避するための回答が必要でした。

4

1 に答える 1

6

バッファする必要があるのはフラッシュ ポリフィルです。HTML5 をサポートしていない古いブラウザーでは<audio>、代わりに jPlayer フラッシュ フォールバックが使用されるため、この問題が発生します。

Web サーバーがストリームのシークをサポートしている必要があります。

シークとAccept-Rangesに関する議論については、HTML5 <audio> タグとhttps://groups.google.com/forum/#!topic/jplayer/irSrmN0aUSUを使用したスト​​リーミング MP3 ファイルのバッファリングとシークに関するjPlayer Google グループの質問を参照してください。ヘッダー。

編集：私はこの問題を掘り下げました...まだ最終的な答えがなくて申し訳ありませんが。

まず、jPlayer 開発ガイドでは、.mp3ファイルと Accept-Ranges ヘッダーの問題について詳しく説明しています。Chrome を使用している場合は、[ネットワークF12] タブを押して選択すると、Accept-Ranges 要求と応答ヘッダーが実際に表示されます。ファイルをクリックすると、ヘッダーを検査できます。良いニュースは、サーバーがAccept-Ranges ヘッダーをサポートしているように見えることです。ただし、ダウンロードを最初にバッファリングする必要がある場合がある理由はまだ説明されていません。.mp3

フラッシュをサポートせず、単一の.mp3. プレイリストはランダムに生成されるため、問題が特定のファイルだけにあるのかどうかを判断するのは困難です。また、問題の診断に役立つ jPlayer の詳細な統計情報を提供できるjPlayer Inspectorを使用しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="jQuery.jPlayer.2.0.0/jquery.jplayer.min.js" type="text/javascript"></script>
    <script src="jQuery.jPlayer.2.0.0/jquery.jplayer.inspector.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $('#jplayer').jPlayer({
                ready: function () {
                    $(this).jPlayer('setMedia', {
                        mp3: 'mp3/example.mp3'
                    });
                },
                swfPath: 'not_a_valid_directory',
                solution: 'html, flash',
                supplied: 'mp3'
            });

            $('#jplayer_inspector').jPlayerInspector({jPlayer:$('#jplayer')});

            $('#seeker').click(function() {
                $('#jplayer').jPlayer('play', 20);
                return false;
            });
        });
    </script>
</head>
<body>
<div id="jplayer"></div>
<a href="#" id="seeker">Play 20s from start</a>
<div id="jplayer_inspector"></div>
</body>
</html>

上記のデモ コードを変更して、以下を含めることもできます。

swfPath: 'jQuery.jPlayer.2.0.0',
solution: 'flash, html',

jPlayer コンストラクターで、Flash を強制的にデフォルトのプレーヤーにします。

于 2011-06-09T11:26:38.483 に答える