Skip to content

add a control button #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ahkari wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add a control button #325

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc51b11
add a control button
Ahkari Jul 13, 2015
f24e8a9
增加多个播放器的控制排除, 拖动点阵进度条只会影响当前播放器
Ahkari Jul 30, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions src/javascript/jplayer/jquery.jplayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,57 @@
factory(root.Zepto);
}
}
//
//The button used like this In my project.
//bind the button mousedown event，copy progress&button element
var $thisPalyer = $(factory) ; //$thisPalyer is JPlayer Active
$thisPalyer.find('.jp-play-barButton').mousedown(function(event){
var eventJq = $.event.fix(event||window.event);
var $playBtn = $(eventJq.target) ;
var $playPro = $playBtn.prev() ;
var $btnCopy = $playBtn.clone().addClass('moving');
var $proCopy = $playPro.clone().addClass('moving');
$playBtn.before($btnCopy).css({'visibility':'hidden'}).addClass('hidding');
$playPro.before($proCopy).css({'visibility':'hidden'}).addClass('hidding');
});
//mousemove control the progress bar
$thisPalyer.mousemove(function(event) {
/* Act on the event */
var eventJq = jQuery.event.fix(event || window.event);
var pageX = eventJq.pageX ;

var parentX = $thisPalyer.find('.jp-seek-bar').offset().left ;

var valueX = ((pageX-parentX-8)>$thisPalyer.find('.jp-seek-bar').width())?$thisPalyer.find('.jp-seek-bar').width():(pageX-parentX-8);
valueX = (valueX<0)?0:valueX;

$thisPalyer.find('.jp-play-barButton.moving').css({'left': valueX}) ;
$thisPalyer.find('.jp-play-bar.moving').css({'width':valueX});
});
//body event
$('body').mouseup(function(e){
// Using $(e.currentTarget) to enable multiple seek bars
if ($thisPalyer.find('.jp-play-barButton').hasClass('moving')){

var $bar = $thisPalyer.find('.jp-seek-bar'),
offset = $bar.offset(),

x = parseInt($thisPalyer.find('.jp-play-barButton.moving').css('left'));
w = $bar.width(),
p = 100 * x / w;

$targetAudioPlayer = $thisPalyer.find('.jp-play-barButton.moving').parent().parent().parent().prev();
$targetAudioPlayer.jPlayer( "playHead", p );

$thisPalyer.find('.jp-play-barButton.moving').remove();
$thisPalyer.find('.jp-play-barButton.hidding').css({'visibility':'visible'}).removeClass('hidding');
$thisPalyer.find('.jp-play-bar.moving').remove();
$thisPalyer.find('.jp-play-bar.hidding').css({'visibility':'visible'}).removeClass('hidding');
}else{

}
});

}(this, function ($, undefined) {

// Adapted from jquery.ui.widget.js (1.8.7): $.widget.bridge - Tweaked $.data(this,XYZ) to $(this).data(XYZ) for Zepto
Expand Down Expand Up @@ -514,6 +565,7 @@
stop: ".jp-stop",
seekBar: ".jp-seek-bar",
playBar: ".jp-play-bar",
playBarButton: ".jp-play-barButton", //add a control button above the progress bar.
mute: ".jp-mute",
unmute: ".jp-unmute",
volumeBar: ".jp-volume-bar",
Expand Down Expand Up @@ -1858,8 +1910,12 @@
this.css.jq.playBar.stop().animate({
width: this.status.currentPercentAbsolute+"%"
}, 250, "linear");
this.css.jq.playBarButton.stop().animate({
left: this.status.currentPercentAbsolute+"%"
}, 250, "linear"); //moving method the same as progress bar
} else {
this.css.jq.playBar.width(this.status.currentPercentRelative+"%");
this.css.jq.playBarButton.left(this.status.currentPercentRelative+"%");//the same
}
}
var currentTimeText = '';
Expand Down