segalap76
@segalap76
Люблю dubstep

Как вывести постер новости в плеер (jplayer)?

Нужно вывести картинку(обложку трека) новости в аудио плеер.

В каждой краткой новости есть кнопка play с таким содержимым
<a id="Player{news-id}" data-player="[xfvalue_audio]" data-title="{muz_artname}" data-id="{news-id}" data-idn="play{news-id}">play</a>

[xfvalue_audio] - прямой путь на трек mp3
{muz_artname} - название трека
{news-id} - id новости

Надо как-то дописать к кнопке вывод картинки
например так
data-image="[xfvalue_image]"
[xfvalue_image] - прямой путь картинки

и дополнить скрипт ниже
Скрипт собирал из разных кусков и почти ничего в нём не понимаю

$(function() {
	var _randomPlay = false;
	var _autoPlayNextPage = false;
	var el_jplayer = $('#jspplayer');
	var _track_id = 0;
	$("[data-player]").live('click', function() {
		$("[data-player]").not(this).removeClass('stop');
		el_jplayer.jPlayer("destroy");
		$('#set_track_title').html('Выберите трек');
		$('.jp-duration, .jp-current-time').html('00:00');

		var el = $(this);
		var el_track = el;
		var _track_title = el.attr('data-title');
		_track_id = el.attr('data-idn');
		
		$("[data-player]").parents('li').removeClass('current');
		el.parents('li').addClass('current');
		
		if(el.hasClass('stop')) {
			var el = $(this);
			el_jplayer.jPlayer("destroy");
			el.removeClass('stop');
			el.parents('li').removeClass('current');
			return false;
		}
				

		var file_mp3 = el.attr("data-player");

		var _get_volume = $('.jp-volume-bar-value1').attr('data-volume');
		
		el_jplayer.jPlayer( {
			ready: function () {
				$(this).jPlayer("setMedia", {
					mp3: file_mp3
				}).jPlayer("play");
			},
			swfPath: "http://dub.center/player",
			supplied: "mp3",
			wmode: "window",
			volume: _get_volume,
							volumechange: function (event) {
											var myVol = event.jPlayer.options.volume,
											myMuted = event.jPlayer.options.muted;
											$('.jp-volume-bar-value1').attr('data-volume', myVol);
							}, 
			cssSelectorAncestor: '',
			cssSelector: {
				volumeBar:'.jp-volume-bar1', 
				volumeBarValue:'.jp-volume-bar-value1', 
				seekBar: '.jp-seek-bar1',
				playBar: '.jp-play-bar1',
				play: ".jp-play",
				pause: ".jp-pause",
				stop: ".jp-stop",
				currentTime: ".jp-current-time",
				duration: ".jp-duration"
			}
		});

		el_jplayer.jPlayer("play");
		el.addClass('stop');



		$('#set_track_title').html(_track_title);
		
		return false;
	});
	
	//First track PLAY
	$(".jp-play").live('click', function() {
		var _spl = $('#jspplayer').html();
		if(!_spl) {
			$("[data-player]").eq(0).click();
		};
		return false;
	});
	
	function sec() { 
		if(_track_id != 0) playedTrack(_track_id);
		setTimeout(sec, 1000);
	}
	sec();
	
	
});


	
	// Commands
	
	function uppodSend(playerID,com,callback) {
		document.getElementById(playerID).sendToUppod(com);
	}
	
	// Requests
	
	function uppodGet(playerID,com,callback) {
		return document.getElementById(playerID).getUppod(com);
	}


Сам плеер
<div class="jp-play"></div>
<div class="jp-pause"></div>

<div class="v_p_sound jp-volume-bar1">   
    <div class="volume">
        <i class="icon-volume-up"></i>
    </div>            
    <div class="jp-volume-bar-value1" data-volume="1"></div>
</div>   
    
<div class="jp-duration">00:00</div>
<div class="v_p_progs">
    <div class="jp-seek-bar1">
        <div class="jp-play-bar1">
            <div class="jp-current-time">00:00</div>
            <div class="v_p_title" id="set_track_title">Выберите трек</div>
        </div>
    </div>
</div>

<div id="jspplayer"></div>
  • Вопрос задан
  • 2398 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы