Question

的音量控制器

绑定功能不起作用。我从一个人使用数据滑块拉出音量控制器的例子中得到了它。但是在Knob的情况下这不起作用....任何人都可以帮忙???

我认为'滑块：准备好滑块：更改'部分必须是其他东西，但我无法弄清楚要放在那里......

JPlayer JQuery

<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
   //<![CDATA[
  $(document).ready(function(){
                var stream = {
                    title: "ABC",
                    mp3: "http://www.xyz.com:8000/stream"
                },
                ready = false;
                $("#jquery_jplayer_1").jPlayer({
                    ready: function (event) {
                        ready = true;
                        $(this).jPlayer("setMedia", stream);
                    },
                    pause: function() {
                        $(this).jPlayer("clearMedia");
                    },
                    error: function(event) {
                        if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                            // Setup the media stream again and play it.
                            $(this).jPlayer("setMedia", stream).jPlayer("play");
                        }
                    },
                    swfPath: "js",
                    supplied: "mp3",
                    preload: "none",
                    wmode: "window",
                    volume: 1,
                    muted: false,
                    keyEnabled: true
                });

                $(".knob")
                                .bind("slider:ready slider:changed", 
                                    function (event, data) {
                                        $("#jquery_jplayer_1").jPlayer( "volume", data.value.toFixed(3));
            });
            //]]>
            </script>

KNOB JQUERY

 <!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
        <script src="js/jquery.knob.js"></script>
        <script>
            $(function($) {
                $(".knob").knob({
                    change : function (value) {
                        //console.log("change : " + value);
                    },
                    release : function (value) {
                        //console.log(this.$.attr('value'));
                        console.log("release : " + value);
                    },
                    cancel : function () {
                        console.log("cancel : ", this);
                    },
                    /*format : function (value) {
                        return value + '%';
                    },*/
                    draw : function () {
                        // "tron" case
                        if(this.$.data('skin') == 'tron') {
                            this.cursorExt = 0.3;
                            var a = this.arc(this.cv)  // Arc
                                , pa                   // Previous arc
                                , r = 1;

                            this.g.lineWidth = this.lineWidth;

                            if (this.o.displayPrevious) {
                                pa = this.arc(this.v);
                                this.g.beginPath();
                                this.g.strokeStyle = this.pColor;
                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                                this.g.stroke();
                            }

                            this.g.beginPath();
                            this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                            this.g.stroke();

                            this.g.lineWidth = 2;
                            this.g.beginPath();
                            this.g.strokeStyle = this.o.fgColor;
                            this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                            this.g.stroke();

                            return false;
                        }
                    }
                });
            });
        </script>

HTML

 <div id="content_main">
    <div id="jquery_jplayer_1" class="jp-jplayer" ><img id="jp_poster_0" style="display: none;"><audio id="jp_audio_0" preload="none" src="about:blank" __idm_id__="16224257"></audio></div>

    <div id="jp_container_1" class="jp-audio-stream">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1" style="display: block;"><div id="triangle" title="Play" rel="tooltip"></div></a></li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;"></a></li>

                </ul>
                 <input class="knob" data-min="10"  data-max="100" data-step="5" data-displayInput="false"  value="70">
            </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 href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>
        </div>
    </div>
</div>

Answer 1

滑块代码对你没用，所以删除：

$(".knob").bind("slider:ready slider:changed", 
                function (event, data) {
                   $("#jquery_jplayer_1").jPlayer( "volume", data.value.toFixed(3));
            });

旋钮提供一些＆＃34;钩子＆＃34;使用。你使用哪个取决于你。如果您希望在旋转旋钮时更改音量，请使用Change;或在用户完成旋钮移动后使用release更改音量。这可以在旋钮设置中找到：

$(function($) {
     $(".knob").knob({
          change : function (value) {
               /*Use this hook to change the volume as the knob is used*/
               //console.log("change : " + value);
          },
          release : function (value) {
               /*Use this hook to change the volume 
                 once user has finished playing with the knob*/
                 //console.log(this.$.attr('value'));
                 console.log("release : " + value);
          },
         cancel : function () {
                 console.log("cancel : ", this);
         },
         .....  
         /* Remaining code removed for brevity.

请记住，如果所有其他方法都失败了...... read the docs ......不要盲目跟随别人的例子。

使用Knob.js作为JPlayer的音量控制器

1 个答案: