Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Jplayer не пашет в Internet explorer 7/8 (https://javascript.ru/forum/jquery/26718-jplayer-ne-pashet-v-internet-explorer-7-8-a.html)

DaniBeiss 19.03.2012 18:27
Jplayer не пашет в Internet explorer 7/8
 
Здравствуйте! Уже башка дымится, не пойму в чем дело, помогите.

Сделал себе аудиоплеер на сайт с помощью плагина 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 -->

DaniBeiss 21.03.2012 14:04
Первоначальную проблему исправил, однако теперь в IE 8 плеер не начинает играть, пока не нажмешь на кнопку shuffle. Используется также скрипт toggle для раскрывающегося списка - может в нем проблема?

Хотя пробовал его совсем убирать и все равно плеер не начинает играть в IE 8 пока не нажмешь shuffle. И еще не работает прогресс бар и время проигрывания.

Подскажите в чем проблема? Может для ie8 нужен хак какой-нибудь?

Кстати делал тестовую страницу на html - все прекрасно работало и в ишаке 8. Может в вордпрессе дело?

DaniBeiss 01.04.2012 19:19
все исправлено. Оказывается жукери подключался два раза из-за плагина

ОлегА 15.05.2013 11:53
ну хоть написал бы где была ошибка


Часовой пояс GMT +3, время: 17:46.