使用jQuery在瀏覽器中播放.m3u播放列表的方法

我一直在爲這個問題的解決方案奮鬥幾周。使用jQuery在瀏覽器中播放.m3u播放列表的方法

我以此爲指南 - https://github.com/aitorciki/jquery-playlist 但我只是不能讓它的工作。該腳本沒有提供一個工作示例。我不是noob，但對我來說這太複雜了。

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);

來源

2014-02-08 Doooder

您正試圖加載的M3U只包含流，我認爲這個插件可以工作，它必須是媒體文件的播放列表。 –

該對象從player.currentSrc中讀取其源。因此，使用

<audio controls src="http://listen.radionomy.com/hits4u.m3u" />

也代理未正確初始化。它應該讀取

$('audio').playlistParser({ 
proxy: 'proxy.php' 
});

來源

2015-01-01 02:10:10 hsz

使用jQuery在瀏覽器中播放.m3u播放列表的方法

回答

相關問題