Question

我正在开发视频播放器应用程序，我已经设置了各种视频播放器应用程序功能，如播放，暂停，前进和后退。

我遇到了快进按钮的问题，当我快进时，Html DOM没有显示第一个快进，即1.5x，当我再次击中2x时，它显示出来......我需要帮助搞清楚，为什么它不会1.5x？

这是我的HTML

<!-- playback controls -->
        <div class="clearfix playback-set1">
            <div class="pull-left">
                <div class="edit-btn-list-container">
                    <ul class="unstyled-list edit-btn-list clearfix">
                        <li style="margin-top: 8px; width: 45px; margin-left: 0;">
                            <a data-bind="click:play, event:{ended:playerOnEnded}" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Play" style="font-size: 25px;"><span data-bind="if: !playerPlaying()"><i class="fa fa-play"></i></span><span data-bind="if: playerPlaying"><i class="fa fa-pause"></i></span></a>
                        </li>
                        <li><a data-bind="click:rewindClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Rewind"><i class="fa fa-fast-backward fa-fw"></i><!-- ko if:intervalRewind() != null --><span data-bind="text:playbackRateIndicator"></span><!-- /ko --></a></li>
                        <li><a data-bind="event:{mousedown:function(){startstep('backward');}}" data-placement="bottom" class="btn btn-alt btn-default" data-toggle="tooltip" data-original-title="Step Backward"><i class="fa fa-step-backward fa-fw"></i></a></li>
                        <li><a data-bind="event:{mousedown:function(){startstep('forward');}}" data-placement="bottom" class="btn btn-alt btn-default" data-toggle="tooltip" data-original-title="Step Forward"><i class="fa fa fa-step-forward fa-fw"></i></a></li>
                        <li><a data-bind="click:fastForwardClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Fast Forward"><!-- ko if:intervalRewind() == null --><span data-bind="text:playbackRateIndicator"></span><!-- /ko --><i class="fa fa-fast-forward fa-fw"></i></a></li>
                    </ul>
                </div>
            </div>

这是相应的javascript代码!!

self.playbackRateIndicator = ko.observable();
    self.playbackRate0 = 1.5;
    self.playbackRate2 = 2.0;
    self.playbackRate1 = 1.0;
    self.playbackRate4 = 4.0;
    self.playbackRate8 = 8.0;

    self.fastForwardClick = function () { self.fastForward(null); }

    self.fastForward = function (playbackRate) {
        if (videoSelector().paused) {
            videoSelector().play();
        }

        if (self.intervalRewind() != null) {
            clearInterval(self.intervalRewind());
            self.intervalRewind(null);
        }
        var newPlaybackRate = self.playbackRate1;
        switch (videoSelector().playbackRate) {

              case self.playbackRate1:
                newPlaybackRate = self.playbackRate0;
                break;

            case self.playbackRate0:
                newPlaybackRate = self.playbackRate2;
                break;
            case self.playbackRate2:
                newPlaybackRate = self.playbackRate4;
                break;
            case self.playbackRate4:
                newPlaybackRate = self.playbackRate8;
                break;
            case self.playbackRate8:
                newPlaybackRate = self.playbackRate1;
                break;
            default:
                newPlaybackRate = self.playbackRate1;
                break;
        }

帮助表示赞赏。谢谢!!

Answer 1

在您发布的代码中，您从未为playbackRateIndicator设置值。在switch中，您可以设置一个局部变量。在切换结束时，您应该将该值传输到您的observable：

playbackRateIndicator(newPlaybackRate);

我无法解释为什么你得到2x并且得不到1.5x因为我无法解释为什么你会看到任何改变，因为你从未设置相关的可观察量。

尝试创建Minimal Complete Verifiable Example问题代码总是一个好主意 - 您可以编写的最简单的小提琴，用于演示问题。首先，你经常可以自己弄清楚发生了什么，但如果没有，它会给我们一些工作，我们可以确定找到问题。

我将如何做到这一点：

＆＃13;

vm = {
  rates: [1,1.5,2,4,8],
  playbackRateIndicator: ko.observable(),
  intervalRewind: ko.observable(null),
  fastForwardClick: function () {
    console.log("Forward!");
    let currentRateIndex = vm.rates.indexOf(vm.playbackRateIndicator()) + 1;
    
    if (currentRateIndex > vm.rates.length - 1) {
      currentRateIndex = vm.rates.length - 1;
    }
    vm.playbackRateIndicator(vm.rates[currentRateIndex]);
  }
};

ko.applyBindings(vm);

＆＃13;

.unstyled-list {
  list-style: none;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="edit-btn-list-container">
  <ul class="unstyled-list edit-btn-list clearfix">
    <li>
      <a data-bind="click:fastForwardClick" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Fast Forward">
        <!-- ko if:intervalRewind() == null --><span data-bind="text:playbackRateIndicator"></span>
        <!-- /ko --><i class="fa fa-fast-forward fa-fw"></i></a>
    </li>
  </ul>
</div>

＆＃13;

Html没有通过knockout observable显示值。

1 个答案: