From cc51b11ad4b7364efb6ab6477639c01483ed8ea6 Mon Sep 17 00:00:00 2001 From: Ahkari Date: Mon, 13 Jul 2015 23:07:47 +0800 Subject: [PATCH 1/2] add a control button you can use the button to set the progress by moving it. --- src/javascript/jplayer/jquery.jplayer.js | 58 ++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/src/javascript/jplayer/jquery.jplayer.js b/src/javascript/jplayer/jquery.jplayer.js index 842f31b6..1898c018 100644 --- a/src/javascript/jplayer/jquery.jplayer.js +++ b/src/javascript/jplayer/jquery.jplayer.js @@ -33,6 +33,59 @@ factory(root.Zepto); } } + // + //The button used like this In my project. + //bind the button mousedown event，copy progress&button element + $('.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'); + }); + //after btn mousedown event， wo can let it everywhere，but outside the progress width. + $('#jp_container_1').mousemove(function(event) { + /* Act on the event */ + var eventJq = jQuery.event.fix(event || window.event); + var pageX = eventJq.pageX ; + + var parentX = $('.jp-seek-bar').offset().left ; + // console.log($('.jp-seek-bar').width()); + + var valueX = ((pageX-parentX-8)>$('.jp-seek-bar').width())?$('.jp-seek-bar').width():(pageX-parentX-8); + valueX = (valueX<0)?0:valueX; + + $('.jp-play-barButton.moving').css({'left': valueX}) ; + $('.jp-play-bar.moving').css({'width':valueX}); + }); + //bind the mouseup event in the body element，when mouseup，stop the button moving event，and reset the progress position. + $('body').mouseup(function(e){ + // Using $(e.currentTarget) to enable multiple seek bars + if ($('.jp-play-barButton').hasClass('moving')){ + + var $bar = $('.jp-seek-bar'), + offset = $bar.offset(), + //x = e.pageX - offset.left, + x = parseInt($('.jp-play-barButton.moving').css('left')); + w = $bar.width(), + p = 100 * x / w; + + $targetAudioPlayer = $('.jp-play-barButton.moving').parent().parent().parent().prev(); + $targetAudioPlayer.jPlayer( "playHead", p ); + + $('.jp-play-barButton.moving').remove(); + $('.jp-play-barButton.hidding').css({'visibility':'visible'}).removeClass('hidding'); + $('.jp-play-bar.moving').remove(); + $('.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 @@ -514,6 +567,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", @@ -1858,8 +1912,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 = ''; From f24e8a96c413ab11fbae4ab9c4393a40d089436a Mon Sep 17 00:00:00 2001 From: Ahkari Date: Thu, 30 Jul 2015 19:12:55 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=9A=E4=B8=AA?= =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E7=9A=84=E6=8E=A7=E5=88=B6=E6=8E=92?= =?UTF-8?q?=E9=99=A4,=20=E6=8B=96=E5=8A=A8=E7=82=B9=E9=98=B5=E8=BF=9B?= =?UTF-8?q?=E5=BA=A6=E6=9D=A1=E5=8F=AA=E4=BC=9A=E5=BD=B1=E5=93=8D=E5=BD=93?= =?UTF-8?q?=E5=89=8D=E6=92=AD=E6=94=BE=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/javascript/jplayer/jquery.jplayer.js | 42 +++++++++++------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/src/javascript/jplayer/jquery.jplayer.js b/src/javascript/jplayer/jquery.jplayer.js index 1898c018..efb63999 100644 --- a/src/javascript/jplayer/jquery.jplayer.js +++ b/src/javascript/jplayer/jquery.jplayer.js @@ -36,51 +36,49 @@ // //The button used like this In my project. //bind the button mousedown event，copy progress&button element - $('.jp-play-barButton').mousedown(function(event){ + 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 $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'); }); - //after btn mousedown event， wo can let it everywhere，but outside the progress width. - $('#jp_container_1').mousemove(function(event) { + //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 = $('.jp-seek-bar').offset().left ; - // console.log($('.jp-seek-bar').width()); + var parentX = $thisPalyer.find('.jp-seek-bar').offset().left ; - var valueX = ((pageX-parentX-8)>$('.jp-seek-bar').width())?$('.jp-seek-bar').width():(pageX-parentX-8); + 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; - $('.jp-play-barButton.moving').css({'left': valueX}) ; - $('.jp-play-bar.moving').css({'width':valueX}); + $thisPalyer.find('.jp-play-barButton.moving').css({'left': valueX}) ; + $thisPalyer.find('.jp-play-bar.moving').css({'width':valueX}); }); - //bind the mouseup event in the body element，when mouseup，stop the button moving event，and reset the progress position. + //body event $('body').mouseup(function(e){ // Using $(e.currentTarget) to enable multiple seek bars - if ($('.jp-play-barButton').hasClass('moving')){ + if ($thisPalyer.find('.jp-play-barButton').hasClass('moving')){ - var $bar = $('.jp-seek-bar'), + var $bar = $thisPalyer.find('.jp-seek-bar'), offset = $bar.offset(), - //x = e.pageX - offset.left, - x = parseInt($('.jp-play-barButton.moving').css('left')); + + x = parseInt($thisPalyer.find('.jp-play-barButton.moving').css('left')); w = $bar.width(), p = 100 * x / w; - $targetAudioPlayer = $('.jp-play-barButton.moving').parent().parent().parent().prev(); + $targetAudioPlayer = $thisPalyer.find('.jp-play-barButton.moving').parent().parent().parent().prev(); $targetAudioPlayer.jPlayer( "playHead", p ); - $('.jp-play-barButton.moving').remove(); - $('.jp-play-barButton.hidding').css({'visibility':'visible'}).removeClass('hidding'); - $('.jp-play-bar.moving').remove(); - $('.jp-play-bar.hidding').css({'visibility':'visible'}).removeClass('hidding'); + $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{ }