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

需要缓冲的是 flash polyfill。不支持 HTML5 的旧浏览器<audio>会遇到这个问题，而使用 jPlayer flash fallback 代替。

您的网络服务器必须支持寻找流。

请参阅这个 jPlayer Google Group question about buffering and Seeking through a streamed MP3 file with HTML5 <audio> tag & https://groups.google.com/forum/#!topic/jplayer/irSrmN0aUSU讨论寻求和接受范围标题。

编辑：我已经对这个问题进行了一些研究......虽然我很抱歉我仍然没有最终答案。

首先，jPlayer 开发指南详细介绍了.mp3文件和 Accept-Ranges 标头的问题。如果您使用 Chrome，您实际上可以看到 Accept-Ranges 请求和响应标头 - 如果您按下F12并选择Network选项卡。单击.mp3文件，您可以检查标题。好消息是您的服务器确实支持 Accept-Ranges 标头。但是，它仍然没有解释为什么有时需要先缓冲下载。

我认为你应该从一个简单的演示开始，不支持 flash 和一个.mp3. 您的播放列表是随机生成的，因此很难确定问题是否仅针对某些文件。另外，我使用了jPlayer Inspector，它可以为 jPlayer 提供详细的统计信息，这可能有助于诊断问题。

<!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 回答