Здравствуйте! Уже башка дымится, не пойму в чем дело, помогите.
Сделал себе аудиоплеер на сайт с помощью плагина Jplayer. Движок сайта - Вордпресс. Плеер вшил прямо в хедэр так как нужно было нарисовать оригинальный скин для плеера, а в плагинах для вордпресса к сожалению возможности оформления плееров ограничены.
Так вот плеер сделан, хорошо работает во всех браузерах и только в ишаке 8 и 7 ничего не происходит.
Пробовал кидать файл Jplayer.swf в корень сайта - не помогло, прописывал пути к этому файлу в самом коде - тоже не помогло. Кроме того ишак почему то не видит некоторые кнопки которые я нарисовал для плеера. В общем часть видит а часть нет.
Плеер сделан на основе демо
http://jplayer.org/latest/demo-02/ кнопки и размеры плеера я поменял на свои.
Код вывода плеера:
<script>
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"Mike Candys - Together Again",
mp3:"mp3/Mike Candys - Together Again.mp3",
oga:"ogg/Mike Candys - Together Again.ogg"
},
{
title:"David Vendetta - Freaky Girls",
mp3:"mp3/david_vendetta_-_freaky_girls.mp3",
oga:"ogg/david_vendetta_-_freaky_girls.ogg"
},
{
title:"Dj Antoine - Welcome to the St.Tropez",
mp3:"mp3/dj_antoine_-_welcome_to_st._tropez_houseshaker_remix.mp3",
oga:"ogg/dj_antoine_-_welcome_to_st._tropez_houseshaker_remix.ogg"
},
], {
swfPath: "js",
supplied: "oga, mp3",
wmode: "window"
});
});
</script>
Код хедэра:
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie7style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie8style.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie9style.css" />
<![endif]-->
<title><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php echo $wp_version ?>">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" href="<?php echo get_settings('siteurl'); ?>/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>">
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>">
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>">
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jcarousellite_1.0.1.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easing.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jplayer.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jplayer.playlist.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/toggle.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/cufon/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/cufon/EngraversGothic_BT_400-EngraversGothicBold_400.font.js"></script>
<script type="text/javascript"> Cufon.replace("#menu-nav a", {fontFamily: 'EngraversGothicBold' });
Cufon.replace("#sidebartop h2", {fontFamily: 'EngraversGothicBold' });
Cufon.replace("#sidebartop2 h2", {fontFamily: 'EngraversGothicBold' });
Cufon.replace("#sidebartop3 h2", {fontFamily: 'EngraversGothicBold' });
Cufon.replace(".t_panel h2", {fontFamily: 'EngraversGothicBold' });
</script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/images/jplayer.css" type="text/css" media="screen">
<script>
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"Mike Candys - Together Again",
mp3:"mp3/Mike Candys - Together Again.mp3",
oga:"ogg/Mike Candys - Together Again.ogg"
},
{
title:"David Vendetta - Freaky Girls",
mp3:"mp3/david_vendetta_-_freaky_girls.mp3",
oga:"ogg/david_vendetta_-_freaky_girls.ogg"
},
{
title:"Dj Antoine - Welcome to the St.Tropez",
mp3:"mp3/dj_antoine_-_welcome_to_st._tropez_houseshaker_remix.mp3",
oga:"ogg/dj_antoine_-_welcome_to_st._tropez_houseshaker_remix.ogg"
},
], {
swfPath: "js",
supplied: "oga, mp3",
wmode: "window"
});
});
</script>
<script>$(function() {
$(".carousel").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb"
});
});</script>
<?php wp_head(); ?>
</head>
<body id="container">
<div id="header">
<div id="headerlogo">
<a href="<?php bloginfo('url'); ?>"><?php $logo = get_bloginfo('template_directory').'/images/logo.png'; ?>
<img src="<?php echo $logo; ?>" alt="" id="logo"/></a>
</div>
<div id="social">
<ul>
<li><a href="*"><img src="<?php bloginfo('template_directory'); ?>/images/mailru.png" alt="mail.ru" height="32px" width="32px"></a></li>
<li><a href="*"><img src="<?php bloginfo('template_directory'); ?>/images/vkontakte.png" alt="mail.ru" height="32px" width="32px"></a></li>
<li><a href="*"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="mail.ru" height="32px" width="32px"></a></li>
<li><a href="*"><img src="<?php bloginfo('template_directory'); ?>/images/youtube.png" alt="mail.ru" height="32px" width="32px"></a></li>
<li><a href="*"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="mail.ru" height="32px" width="32px"></a></li>
</div>
</div><!-- div id="header" -->
<div id="topmenu">
<div id="menu-nav">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
</div>
</div>
<div id="track"><div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div><div id="jpp"><h2></h2>
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div></div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div></div>
<div id="wrapper">
<!-- end header -->