Tuesday, October 30, 2012

jquery源码-集成多款播放器的网页

现在网页播放器越来越多了.现在我们为大家提供一款基于多种网页播放器的jquery源码.请看这里,在线示例在这里:

music.htm的源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title>语音新闻王音乐电台集锦</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel='stylesheet' href='css/style.css'>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src='js/jquery.min.js'></script>
<script src='js/jquery.color-RGBa-patch.js'></script>
<script src='js/music.js'></script>
</head>
<body>
<header>
<h1> pk17s 音 乐 电 台</h1>
</header>

<div id="music_list" class="nav-wrap">
<ul class="group" id="navmenu"></ul>
</div>

<div class="clearfix" id="div_tab"></div>

<div id="div_pannel" style="height:100%"></div>
</body>
</html>




music.js的源码:


function CreateDiv(tabid, url, name)
{
///如果当前tabid存在直接显示已经打开的tab
if (document.getElementById("div_" + tabid) == null)
{
$('.crent').removeClass('crent');
$('#div_pannel').children().hide();

//创建iframe
var box = document.createElement("iframe");
box.id = "div_" + tabid;
box.src = url;
box.height = "100%";
box.frameBorder = 0;
box.width = "100%";
box.onload=iframeLoadReady;
document.getElementById("div_pannel").appendChild(box);


//创建li菜单
var tab = document.createElement("li");
tab.className = "crent";
tab.id = tabid;
var litxt = "<span><a href=\"javascript:;\" onclick=\"javascript:CreateDiv('" + tabid + "','" + url + "','" + name + "')\" title=" + name + " class=\"menua\">" + name + "</a><a onclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"关闭当前窗口\"><a></span>";
tab.innerHTML = litxt;
document.getElementById("div_tab").appendChild(tab);
}
else
{
var tablist = document.getElementById("div_tab").getElementsByTagName('li');
var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
//alert(tablist.length);
for (i = 0; i < tablist.length; i++)
{
tablist[i].className = "";
pannellist[i].style.display = "none"
}
document.getElementById(tabid).className = 'crent';
document.getElementById("div_" + tabid).style.display = 'block';
}
}
function RemoveDiv(obj)
{
var ob = document.getElementById(obj);
ob.parentNode.removeChild(ob);
var obdiv = document.getElementById("div_" + obj);
obdiv.parentNode.removeChild(obdiv);
var tablist = document.getElementById("div_tab").getElementsByTagName('li');
var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');
if (tablist.length > 0)
{
tablist[tablist.length - 1].className = 'crent';
pannellist[tablist.length - 1].style.display = 'block';
}
}
function flashChecker()
{
var hasFlash=0;
var flashVersion=0;
var isIE=/*@cc_on!@*/0;

if(isIE)
{
var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if(swf) {
hasFlash=1;
VSwf=swf.GetVariable("$version");
flashVersion=parseInt(VSwf.split(" ")[1].split(",")[0]);
}
}else{
if (navigator.plugins && navigator.plugins.length > 0)
{
var swf=navigator.plugins["Shockwave Flash"];
if (swf)
{
hasFlash=1;
var words = swf.description.split(" ");
for (var i = 0; i < words.length; ++i)
{
if (isNaN(parseInt(words[i]))) continue;
flashVersion = parseInt(words[i]);
}
}
}
}
return {f:hasFlash,v:flashVersion};
}

function iframeLoadReady() {
var demoIframe = this;

if(demoIframe.contentWindow==window)
{
var h1=0, h2=0, d=document, dd=d.documentElement;
demoIframe.parentNode.style.height = demoIframe.offsetHeight +"px";
demoIframe.style.height = "10px";

if(dd && dd.scrollHeight) h1=dd.scrollHeight;
if(d.body) h2=d.body.scrollHeight;
var h=Math.max(h1, h2);

if(document.all) {h += 4;}
if(window.opera) {h += 1;}

if(h<400)
h = 400;

demoIframe.style.height = demoIframe.parentNode.style.height = h +"px";
}
}

function createMusicList(){
var list = [
{'name':'grooveshark',url:'http://html5.grooveshark.com/#!/popular',text:'grooveshark','player':'html5'},
{'name':'pk17s',url:'simplemodal_tab_music_pk.htm',text:'pkmusic','player':'html5'},
{'name':'pkradio',url:'simplemodal_tab_rssradio.htm',text:'pkradio','player':'html5'},
{'baidu':'baidu',url:'http://fm.baidu.com/',text:'百度','player':'pc'},
{'kugou':'kugou',url:'http://m.kugou.com/',text:'酷狗','player':'pc'},
{'name':'douban',url:'http://douban.fm/partner/baidu/doubanradio',text:'豆瓣','player':'pc'},
{'name':'kuwo',url:'http://player.kuwo.cn/webmusic/webdiantai/kuwoBaiduPlay.jsp',text:'酷我','player':'pc'},
{'name':'fmqq',url:'http://fm.qq.com',text:'QQ音乐电台','player':'pc'},
{'name':'yqq',url:'http://music.qq.com',text:'QQ网页音乐','player':'pc'}
];
var defaultitem = null;
var setupedflash = flashChecker().f;
var s = '';
var isMobile = navigator.userAgent.match(/mobile/i);
for(var i in list){
var item = list[i];
if(item.player=='pc')
{
if(isMobile)
continue;
}
else if(item.player=='flash')
{
if(!setupedflash){
continue;
}
}
if(!defaultitem)
defaultitem = item;
s += '<li id="nav_li_' + item.name + '"><a href="javascript:onLiItemClick(\''+item.name+'\',\''+item.url+'\',\''+item.text+'\');">'+item.text+'</a></li>';
}
if(!defaultitem)
return;
document.getElementById("navmenu").innerHTML = s;
onLiItemClick(defaultitem.name,defaultitem.url,defaultitem.text);
/* Kick IE into gear */
$(".current_page_item a").mouseenter();
}

function onLiItemClick(tabid, url, name){

$("#navmenu li.current_page_item").removeClass("current_page_item");

CreateDiv(tabid,url,name);

$('#nav_li_'+tabid).addClass("current_page_item");
}

// DOM Ready
$(function() {
createMusicList();

var $el, leftPos, newWidth;
$mainNav2 = $("#navmenu");
$mainNav2.append("<li id='magic-line-two'></li>");

var $magicLineTwo = $("#magic-line-two");
var ol = $(".current_page_item a");
ol = ol.position();
ol = ol.left;
$magicLineTwo
.width($(".current_page_item").width())
.height($mainNav2.height())
.css("left", ol)
.data("origLeft", ol)
.data("origWidth", $magicLineTwo.width())
.data("origColor", "#8DC91E");

$("#navmenu a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth,
backgroundColor: "#8DC91E"
})
}, function() {
$magicLineTwo.stop().animate({
left: $magicLineTwo.data("origLeft"),
width: $magicLineTwo.data("origWidth"),
backgroundColor: $magicLineTwo.data("origColor")
});
});
});




其它请见在线示例的文件.