使用 jQuery 在浏览器中播放 .m3u 播放列表的方法
Posted
技术标签:
【中文标题】使用 jQuery 在浏览器中播放 .m3u 播放列表的方法【英文标题】：Method for playing a .m3u playlist in browser using jQuery 【发布时间】：2014-03-05 14:15:38 【问题描述】：几周来我一直在努力寻找解决方案。
我以此为指导 - https://github.com/aitorciki/jquery-playlist 但我就是不能让它工作。该脚本没有附带工作示例。我不是菜鸟，但这对我来说有点太复杂了。
Firebug 确认所有脚本正在加载。当 Ajax 调用运行时，网络播放器会闪烁一瞬间 - 然后是白屏。
我的页面包括：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.playlist.js"></script>
<body>
<script type="text/javascript">
$(document).ready(function()
proxy: 'proxy.php',
$('audio').playlistParser();
);
</script>
<audio controls>
<source src="http://listen.radionomy.com/hits4u.m3u" type="audio/m3u">
Your browser does not support the audio element.
</audio>
</body>
然后是我的ajax调用代理文件（proxy.php）：
$url = file_get_contents($_GET["url"]);
echo $url;
最后是 jquery.playlist.js：
(function($)
$.parserM3U = function(list)
this.parse = function()
//TODO: in some cases an empty string is matched, why?
m = list.match(/^(?!#)(?!\s).*$/mg);
urls = $.grep(m, function(n, i)
return (n != '');
);
return urls;
;
$.playlistOptions =
proxy: null,
parsers:
m3u: $.parserM3U
,
navArrows: false,
navArrowsPath: ''
;
var fileExtension = function(url)
m = url.match(/\w*?(?=#)|\w*?(?=\?)|\w*$/);
return m[0];
var createNavArrows = function(player)
var ids = ['left', 'right'];
var arrows = new Array();
for (i in ids)
var arrow = new Image();
var pos = ids[i];
var src = $.playlistOptions.navArrowsPath + pos + '.png';
var id = 'playlist_arrow_' + pos;
$(arrow).attr('src', src);
$(arrow).attr('id', id);
$(arrow).hide();
$('body').append($(arrow));
arrows.push($(arrow));
return arrows;
var positionNavArrow = function(arrow, pos, player)
//In Webkit browsers the positioning fails if no height and
//width have been set for the player.
var atop = (player.height() / 2) + (player.position().top) - (arrow.height() / 2);
if (pos == 'left')
var aleft = player.position().left + 10;
else
var aleft = player.position().left + player.width() - arrow.width() - 10;
arrow.css('position', 'absolute');
arrow.css('top', atop);
arrow.css('left', aleft);
var disableNavArrow = function(arrow)
arrow.hide()
arrow.css('visibility', 'hidden');
var enableNavArrow = function(arrow)
arrow.css('visibility', 'visible');
$.fn.playlistParser = function(settings)
$.extend($.playlistOptions, settings);
var plExtensions = new Array();
for (ext in $.playlistOptions.parsers)
plExtensions.push(ext);
return this.each(function()
var player = this;
var src = player.currentSrc;
var extension = fileExtension(src);
var playlist = new Array();
var current = -1;
var leftArrow = null;
var rightArrow = null;
if ($.inArray(extension, plExtensions) < 0) return;
var playFollowing = function(reverse)
if (reverse)
current--;
else
current++;
if ($.playlistOptions.navArrows)
if (current == 0)
disableNavArrow($(leftArrow));
else
enableNavArrow($(leftArrow));
if (current == playlist.length - 1)
disableNavArrow($(rightArrow));
else
enableNavArrow($(rightArrow));
var nextUrl = playlist[current];
player.src = nextUrl;
player.load();
if ($.playlistOptions.navArrows)
var arrows = createNavArrows($(player));
leftArrow = arrows[0];
rightArrow = arrows[1];
$(leftArrow).bind('click', function(e)
playFollowing(true);
);
$(rightArrow).bind('click', function(e)
playFollowing();
);
// Seems that Webkit browsers defer the images size parsing.
// Since positioning them needs the size, we wait until this
// information is available.
$(window).load(function()
positionNavArrow(leftArrow, 'left', $(player));
positionNavArrow(rightArrow, 'right', $(player));
);
$(leftArrow).bind('mouseover', function(e)
$(this).show();
);
$(rightArrow).bind('mouseover', function(e)
$(this).show();
);
$(player).bind('mouseover', function(e)
leftArrow.show();
rightArrow.show();
);
$(player).bind('mouseout', function(e)
leftArrow.hide();
rightArrow.hide();
);
if ($.playlistOptions.proxy)
ajax_url = $.playlistOptions.proxy;
ajax_options = url: src;
else
ajax_url = src;
ajax_options = null;
$.get(ajax_url, ajax_options, function(data)
var parser = new $.playlistOptions.parsers[extension](data);
playlist = parser.parse();
// Playlist emulation, each time a file has ended playing
// let's play the next one in the list.
if (playlist.length > 0)
$(player).bind('ended', function(e)
playFollowing();
);
playFollowing();
);
);
;
)(jQuery);
【问题讨论】：
您尝试加载的 M3U 仅包含流，我认为要使此插件正常工作，它必须是媒体文件的播放列表。 您在使用 CORS 时遇到问题 【参考方案1】：对象从 player.currentSrc 读取它的源。为此使用
<audio controls src="http://listen.radionomy.com/hits4u.m3u" />
代理也没有正确初始化。它应该是
$('audio').playlistParser(
proxy: 'proxy.php'
);
【讨论】：
以上是关于使用 jQuery 在浏览器中播放 .m3u 播放列表的方法的主要内容，如果未能解决你的问题，请参考以下文章
VideoView 在 Fragment 中播放 .m3u8 不会在 Nexus 7 中播放。在 HTC1 M8 中播放正常