я использую jPlayer на моем сайте, но он не работает, и нет ошибки в консоли для отладки, а также
Все файлы включены в правильном порядке
заголовок
<script data-main="/scripts/main" src="{{ URL::asset('scripts/require.js') }}"></script>
<script type="text/javascript" src="{{URL::asset('scripts/jquery.js')}}"></script>
Индекс
<li>
<div class="userPhoto"> <img src="https://web-answers.ru/wp-content/uploads/2019/02/artists/1.png"> </div>
<div class="userSummary" >
<a href="/data/2.mp3" class="track" title="Ghoom Tana 1">d</a>
<strong>
<a href="#">
John Doe
</a>
</strong>
<span>
<a href="#">Jazz</a> / <a href="#">Big Band</a>,
<a href="#">Swing</a>
</span>
</div>
<div class="featuredPlayer">
<span class="track-name"> </span><br>
<div class="playerControls">
<span class="jp-current-time"></span>
<span class="jp-stop" title="Stop">Stop</span>
<span class="jp-play" title="Play">Play</span>
<span class="jp-pause" title="Pause">Pause</span>
<span class="jp-duration"></span>
</div>
<div class="thePlayer"><a href="#" class="likeIt" title="Like?">w</a></div>
</div>
</li>
JS
$('.userPhoto img').each(function () {
$this = $(this);
var $height = $this.height();
console.log($height);
$this.parent().parent().find(".featuredPlayer").css("height", $height);
});$('.userSummary > a').click(function () {
$(this).parents().find('.featuredPlayer').addClass('show');
$(this).parents().siblings().find('.featuredPlayer').removeClass('show');
});$('.jp-stop').click(function () {
$(this).parents().find('.featuredPlayer').removeClass('show');
});
var container = $('nav#left').jScrollPane({
showArrows: false,
autoReinitialise: false
});
var jsp = container.data('jsp');
$(window).on('resize', function () {
jsp.reinitialise();
});
// Local copy of jQuery selectors, for performance.
var my_jPlayer = $("#jquery_jplayer"),
my_trackName = $("#jp_container .track-name"),
my_playState = $("#jp_container .play-state"),
my_extraPlayInfo = $("#jp_container .extra-play-info");
// Some options
var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
opt_auto_play = true, // If true, when a track is selected, it will auto-play.
opt_text_playing = "Now playing", // Text when playing
opt_text_selected = "Track selected"; // Text when not playing
// A flag to capture the first track
var first_track = true;
// Change the time format
$.jPlayer.timeFormat.padMin = true;
$.jPlayer.timeFormat.padSec = true;
// $.jPlayer.timeFormat.sepMin = " min ";
// $.jPlayer.timeFormat.sepSec = " sec";
// Initialize the play state text
my_playState.text(opt_text_selected);
// Instance jPlayer
my_jPlayer.jPlayer({
ready: function () {
$("#jp_container .track-default").click();
},
timeupdate: function (event) {
my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
},
play: function (event) {
my_playState.text(opt_text_playing);
},
pause: function (event) {
my_playState.text(opt_text_selected);
},
ended: function (event) {
my_playState.text(opt_text_selected);
},
//swfPath: "../../dist/jplayer",
cssSelectorAncestor: "#jp_container",
supplied: "mp3",
wmode: "window",
smoothPlayBar: true
});
// Create click handlers for the different tracks
$("#jp_container .track").click(function (e) {
my_trackName.text($(this).attr('title'));
my_jPlayer.jPlayer("setMedia", {
mp3: $(this).attr("href")
});
my_jPlayer.jPlayer("play");
first_track = false;
$(this).blur();
return false;
});
$('.profilePlaylist ul li ul li a.track').click(function (e) {
$('.profilePlaylist ul li ul').removeClass('playing');
var playing = $(this).parent().parent().parent().find('ul');
var notplaying = $(this).parent().parent().parent().find('ul.playing');
playing.toggleClass('playing');
notplaying.toggleClass('playing');
e.preventDefault();
});});
У меня недостаточно репутации для комментариев.
Ваш jPlayer использует $("#jquery_jplayer")
, но в вашем html ничего не указано это. Вы пропустили это или я что-то упустил?
То же самое касается $("#jp_container .track-default").click();
У вас нет элемента track-default в вашем html. Где вы указываете дорожки по умолчанию для вашего jPlayer?
Может быть, это может помочь: http://jsfiddle.net/XLNCY/19717/
Если я что-то упустил, пожалуйста, скажите мне. Или, если вы можете опубликовать полный HTML с классами, которые вы используете в jquery, это было бы лучше. Jsfiddle было бы здорово, если бы ты мог.
Других решений пока нет …