我有一个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秒的答案。
答案 0 :(得分:6)
这是需要缓冲的flash polyfill。不支持HTML5 <audio>
的较旧浏览器将遇到此问题,而jPlayer闪回后备则会被使用。
您的网络服务器必须支持搜索流。
请参阅this jPlayer Google Group有关缓冲的问题和Seeking through a streamed MP3 file with HTML5 <audio> tag&amp; https://groups.google.com/forum/#!topic/jplayer/irSrmN0aUSU有关搜索和Accept-Ranges标题的讨论。
编辑:我已经对这个问题进行了一些挖掘......虽然我很抱歉我仍然没有得到最终答案。
首先,jPlayer Development Guide详细说明了.mp3
files and the Accept-Ranges header的问题。如果您使用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>
您还可以更改上面的演示代码以包含:
swfPath: 'jQuery.jPlayer.2.0.0',
solution: 'flash, html',
在jPlayer构造函数中强制Flash成为默认播放器。