如何避免jPlayer中不必要的缓冲

foo*_*oty 9 ajax jquery html5 jplayer

我有一个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
      });
Run Code Online (Sandbox Code Playgroud)

编辑

我想要一个避免缓冲前XX秒的答案.

and*_*dyb 6

这是需要缓冲的flash polyfill.不支持HTML5的较旧浏览器<audio>将遇到此问题,而使用jPlayer闪回后备.

您的Web服务器必须支持搜索流.

这jPlayer谷歌集团有关缓冲和问题,寻求通过与HTML5的<audio>标签的流MP3文件https://groups.google.com/forum/#!topic/jplayer/irSrmN0aUSU的讨论寻求和接受,范围头.

编辑:我已经做了一些挖掘这个问题...虽然我很抱歉我仍然没有最终答案.

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

我认为你应该从一个简单的演示开始,没有闪存支持和单个.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>
Run Code Online (Sandbox Code Playgroud)

您还可以更改上面的演示代码,包括:

swfPath: 'jQuery.jPlayer.2.0.0',
solution: 'flash, html',
Run Code Online (Sandbox Code Playgroud)

在jPlayer构造函数中强制Flash成为默认播放器.