admin管理员组文章数量:1244247
Is it possible to check if jPlayer is playing right now? I have several players per page and I need to change some classes, depending on which jPlayer is currently playing. The most obvious check for me is to see if the player I'm checking is currently in playing state. I found something about the playing event in the documentation, but don't get how to use it.
For now I have the following, and this works in my situation, but a better solution would be to check which player is playing when the button (which fired the play function) was clicked:
// Shows in what player the song is currently playing.
var currentSongId;
function play(songId) {
$(".playing").removeClass("playing");
$(".stop").removeClass("stop").addClass("play");
// If some song is playing-stop it and resets current song so that on next play-it starts playing again
if (songId == currentSongId) {
currentSongId = null;
return;
}
// some other logic where I set currentSongId1 or 2, depending on what player's play is fired.
}
Is it possible to check if jPlayer is playing right now? I have several players per page and I need to change some classes, depending on which jPlayer is currently playing. The most obvious check for me is to see if the player I'm checking is currently in playing state. I found something about the playing event in the documentation, but don't get how to use it.
For now I have the following, and this works in my situation, but a better solution would be to check which player is playing when the button (which fired the play function) was clicked:
// Shows in what player the song is currently playing.
var currentSongId;
function play(songId) {
$(".playing").removeClass("playing");
$(".stop").removeClass("stop").addClass("play");
// If some song is playing-stop it and resets current song so that on next play-it starts playing again
if (songId == currentSongId) {
currentSongId = null;
return;
}
// some other logic where I set currentSongId1 or 2, depending on what player's play is fired.
}
3 Answers
Reset to default 5Example binding for play event:
$(id).bind($.jPlayer.event.play, function(event) {
if (event.status.currentTime>0 && event.status.paused===false) {
// Its playing right now
}
});
also check for : http://www.jplayer/latest/developer-guide/#jPlayer-event-type
MP3 list with jPlayer:
var srcvalue = "";
var songName = "";
function play(songId) {
srcvalue = $(songId).attr('src');
songName = $(songId).attr('title');
// Show the new song's title
$(".jp-title ul li").text(songName);
// Then add the new song
$("#jquery_jplayer_1").jPlayer("setMedia", {
oga: srcvalue
}
// Play from the begining
).jPlayer("playHead", 0).jPlayer("play");
}
$(document).ready(function() {
// Get first song
srcvalue = $(".song:first-child").attr('src');
songName = $(".song:first-child").attr('title');
// Then show the first song's title
$(".jp-title ul li").text(songName);
// Bind click event to playlist
$(".song").each(function() {
$(this).click(function() {
play($(this));
});
});
// Starting value
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
oga: srcvalue
});
},
supplied: "oga"
});
});
fiddle: http://jsfiddle/BerkerYuceer/JX2B3/
Multiple jPlayer instance:
html:
<div class="player" src="http://www.jplayer/audio/ogg/TSP-01-Cro_magnon_man.ogg" title="Cro Magnon Man"></div>
<div class="player" src="http://www.jplayer/audio/ogg/Miaow-01-Tempered-song.ogg" title="Tempered Song"></div>
<div class="player" src="http://www.jplayer/audio/ogg/Miaow-07-Bubble.ogg" title="Bubble"></div>
<div class="player" src="http://www.jplayer/audio/ogg/Miaow-06-Beside-me.ogg" title="Beside Me"></div>
<div class="player" src="http://www.jplayer/audio/ogg/Miaow-10-Thin-ice.ogg" title="Thin Ice"></div>
jQuery:
$(document).ready(function() {
var i = 0;
var srcvalue = "";
var songName = "";
// For each player
$(".player").each(function(){
srcvalue = $(this).attr('src');
songName = $(this).attr('title');
// Add html elements
$(this).after(
'<div id="jp_container_' + i + '" class="jp-audio">' +
'<div class="jp-type-single">' +
'<div class="jp-gui jp-interface">' +
'<ul class="jp-controls">' +
'<li> <a class="jp-play" tabindex="1" href="javascript:;">play</a> </li>' +
'<li> <a class="jp-pause" tabindex="1" href="javascript:;" style="display: none;">pause</a> </li>' +
'<li> <a class="jp-stop" tabindex="1" href="javascript:;">stop</a> </li>' +
'<li> <a class="jp-mute" title="mute" tabindex="1" href="javascript:;">mute</a> </li>' +
'<li> <a class="jp-unmute" title="unmute" tabindex="1" href="javascript:;" style="display: none;">unmute</a> </li>' +
'<li> <a class="jp-volume-max" title="max volume" tabindex="1" href="javascript:;">max volume</a> </li>' +
'</ul>' +
'<div class="jp-progress">' +
'<div class="jp-seek-bar" style="width: 100%;">' +
'<div class="jp-play-bar" style="width: 0%;"> </div>' +
'</div>' +
'</div>' +
'<div class="jp-volume-bar">' +
'<div class="jp-volume-bar-value" style="width: 80%;"></div>' +
'</div>' +
'<div class="jp-time-holder">' +
'<div class="jp-current-time">00:00</div>' +
'<div class="jp-duration">00:00</div>' +
'<ul class="jp-toggles">' +
'<li> <a class="jp-repeat" title="repeat" tabindex="1" href="javascript:;">repeat</a> </li>' +
'<li> <a class="jp-repeat-off" title="repeat off" tabindex="1" href="javascript:;" style="display: none;">repeat off</a> </li>' +
'</ul>' +
'</div>' +
'</div>' +
'<div class="jp-title">' +
'<ul>' +
'<li>' + songName + '</li>' +
'</ul>' +
'</div>' +
'<div class="jp-no-solution" style="display: none;">' +
'<span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a target="_blank" href="http://get.adobe./flashplayer/">Flash plugin</a>.' +
'</div>' +
'</div>' +
'</div>');
$(this).jPlayer({ // Create player
// The $.jPlayer.event.ready event
ready: function(event) {
// Set media
$(this).jPlayer("setMedia", { oga: srcvalue });
},
/* This is the playing state and if im not mistaken
* you were looking for this.
* playing: function() { },
* pause: function() { },
*/
// On each play disable others
play: function() {
// Pause all except this one
$(this).jPlayer("pauseOthers");
/* This means start from 0
* when used in play even after pause event
* it will start from begining
*/
$(this).jPlayer("playHead", 0);
},
// The $.jPlayer.event.ended event
ended: function() {
// Repeat the media
$(this).jPlayer("playHead", 0);
},
// Supplied MIME types
supplied: "oga",
// Css Ancestor
cssSelectorAncestor: '#jp_container_' + i,
// Css Selector
cssSelector: {
videoPlay: '.jp-video-play',
play: '.jp-play',
pause: '.jp-pause',
stop: '.jp-stop',
seekBar: '.jp-seek-bar',
playBar: '.jp-play-bar',
mute: '.jp-mute',
unmute: '.jp-unmute',
volumeBar: '.jp-volume-bar',
volumeBarValue: '.jp-volume-bar-value',
volumeMax: '.jp-volume-max',
currentTime: '.jp-current-time',
duration: '.jp-duration',
fullScreen: '.jp-full-screen',
restoreScreen: '.jp-restore-screen',
repeat: '.jp-repeat',
repeatOff: '.jp-repeat-off',
gui: '.jp-gui',
noSolution: '.jp-no-solution'
},
// Warning Alerts
warningAlerts: false
});
i = i + 1;
});
});
fiddle: http://jsfiddle/BerkerYuceer/t9dZh/
Easy one:
if($("#jquery_jplayer_1").data().jPlayer.status.paused == false){
//Is Playing;
}
Or you could use:
if($("#priPlayerID").jPlayer("getData","diag.isPlaying") == true){
//Is Playing
}
本文标签： javascriptCheck if jPlayer is playingStack Overflow
版权声明：本文标题：javascript - Check if jPlayer is playing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1740132008a2229921.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论