我有一个音频播放器,用户可以在其中单击列表中歌曲旁边的播放按钮,然后播放器开始流式传输音频。播放按钮换成暂停按钮,以便用户可以暂停音频。我遇到的问题是,一旦发生点击,我就无法将自定义属性(数据播放器动作)从播放切换到暂停:
jQuery的:
var playerInit;
$('.btn-control').live("click", function() {
var $action, $song_id, self;
self = $(this);
$action = self.attr('data-player-action');
$song_id = self.parents("tr").attr('id');
$(document.body).data('song-id', $song_id);
playerInit($action, self);
return false;
});
playerInit = function(action, elem) {
var jw_content, playerData, self;
self = $(elem);
$('.tracks tr td').not(self.parent()).removeClass('currentlyPlaying');
switch (action) {
case "play":
self.removeClass('play').addClass('pause');
if (self.parent().hasClass('currentlyPlaying')) {
jwplayer().play(true);
} else {
self.parent().addClass('currentlyPlaying');
$('#player_area').slideDown('200');
$('#player_wrapper').show();
jw_content = jQuery.parseJSON(self.attr('data-player-feed'));
playerData = {
'streamer': jw_content.Location,
'file': jw_content.Resource
};
jwplayer().load(playerData).play(true);
}
break;
case "pause":
self.removeClass('pause').addClass('play');
jwplayer().pause();
break;
case "playAlbum":
jwplayer().play(true);
}
return jwplayer().onComplete(function() {
var $reloadPlayer;
$(document.body).data('song-id', null);
self.parentsUntil('.tracks').find('.pause').hide();
self.parentsUntil('.tracks').find('.play').show();
self.parent().removeClass('currentlyPlaying');
return $reloadPlayer = true;
});
};
HTML:
<a href=\"#\" class=\"btn-control play\" data-player-action='play' data-artist-id='" + data["Artist"]["MnetId"] + "' data-album-id='" + data["MnetId"] + "' data-player-feed='" + x["SampleLocations"].first.to_json + "' data-player-position='0'></a>
任何帮助是极大的赞赏!!
最佳答案
jQuery的data()
方法可用于修改HTML5自定义属性。只需记住省略data-
前缀。
action = element.data('player-action'); //Get
element.data('player-action', 'pause'); //Set