html - 视频TImeline指示器出现问题

Question

我正在开发视频播放器应用程序，正在使用淘汰赛js。我在这里面临的问题是...还有一个时间表指示器，其范围超出了视频播放器本身。它不占用视频上搜索栏的宽度。我不知道为什么。

这是我的代码：
Javascript ...

 self.addClipOnTimeline = function (tempClip) {
        var tempObject;
        tempObject = { id: tempClip.clipId(), startValue: tempClip.inTime(), endValue: tempClip.outTime(), color: tempClip.colorInIndicator }

        var isNewClip = true;
        for (var i = 0; i < self.objectArrayForRangeSelector().length; i++) {
            if (self.objectArrayForRangeSelector()[i].id == parent.selectedClip().clipId()) {
                isNewClip = false;
                break;
            }
        }
        if (isNewClip) {
            self.objectArrayForRangeSelector.push(tempObject);
        }
        if ($("#slider-range-custom-label").length > 0 && self.objectArrayForRangeSelector().length > 0) {
            $('#slider-range-custom-label').rangeSlider("destroy");
            $('#slider-range-custom-label .ui-slider-range').remove();
        }
        self.drawTimeLine(0, self.durationInFrames(), self.objectArrayForRangeSelector());
    }

    self.drawTimeLine = function (minVal, maxVal, range) {
        if (!range || range.length === 0) {
            return false;
        }


        $('#slider-range-custom-label').rangeSlider({
            min: minVal,
            max: maxVal,
            ranges: range,
            disabled: true
        });

        $('.ui-slider-range').click(function (data, event) {

        });
        return true;
    }

    self.tempStartPoint = 0;

    self.slide = function (event, ui) {
        self.pauseVideo();

        if (self.isFirstHandleSelected()) {
            var value = isNaN(ui.value[0]) ? 0 : ui.value[0];
            self.timeInFrame(value);
            self.tempStartPoint = self.timeInFrame();
            self.seekTo(TimecodeMath.Timecode.getFileRelativeSeconds(self.timeInFrame(), self.frameRate()));
        }
        else {
            self.timeOutFrame(ui.value[1]);
            self.tempEndPoint = self.timeOutFrame();
            self.seekTo(TimecodeMath.Timecode.getFileRelativeSeconds(self.timeOutFrame(), self.frameRate()));
        }
    }

HTML ...

<div class="pull-right">
                <div class="edit-btn-list-container">
                    <ul class="unstyled-list edit-btn-list">
                        <li><a data-bind="click:toggleMute" class="btn btn-alt btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="Volume"><i data-bind="css:{'fa fa-volume-up':!isMuted(), 'hi hi-volume-off':isMuted}" style="font-size:16px;"></i></a></li>
                        <li class="slider-volume-Container">
                            <input type="text" data-bind="event:{slide:function(event, ui){controlVolume(event,ui)}}" class="form-control volume-slider"
                                   data-slider-value="1" data-slider-min="0" data-slider-max="1" data-slider-step="0.01" data-slider-orientation="horizontal" data-slider-tooltip="hide" />
                        </li>
                        <!-- ko if: startTcInFrames() != null -->
                        <li><a data-bind="click: toggleTcOverlay" href="javascript:void(0)" class="btn btn-alt btn-default" data-placement="bottom" data-tooltip="tooltip" data-toggle="tooltip" data-original-title="Show Timecode" title="Show Timecode"><i class="fa fa-clock-o"></i></a></li>
                        <!-- /ko -->
                        <li data-bind="visible:!$parent.isThumbnailGeneratorOpened()"><a data-bind="click:captureBeautyShot, disable:thumbnailButtonDisabled, css: {'disable-click' : thumbnailButtonDisabled}" href="javascript:void(0)" class="btn btn-alt btn-default" data-placement="bottom" data-tooltip="tooltip" data-toggle="tooltip" data-original-title="Capture Thumbnail"><i class="fa fa-camera"></i></a></li>
                        <!-- ko if: captionFiles() != null && captionFiles().length > 0 -->
                        <li><a data-bind="click:toggleVideoCc" href="javascript:void(0)" class="btn btn-alt btn-default" data-placement="bottom" data-tooltip="tooltip" data-toggle="tooltip" data-original-title="CC" title="CC"><i class="hi hi-subtitles"></i></a></li>
                        <!-- /ko -->
                        <li><a data-bind="click:videoFullscreen" href="javascript:void(0)" class="btn btn-alt btn-default" data-placement="bottom" data-tooltip="tooltip" data-toggle="tooltip" data-original-title="Full Screen" title="Full Screen"><i class="hi hi-fullscreen"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Slider -->

            <input id="scrubber" type="range" class="range-label" data-bind="attr:{max:durationInFrames},value:currentTimeFrames(), event:{input:function(event,ui){slideScrubber(event,ui)}}" min="0" step="1">
            <!--ko if:!$parent.isThumbnailGeneratorOpened()-->
            <input type="text" data-bind="attr:{'data-slider-max':durationInFrames,'data-slider-value':'['+[timeInFrame(), timeOutFrame()]+']'}, event:{slide:function(event,ui){slide(event,ui)}}" class="form-control input-sliderNew" data-slider-min="0" data-slider-step="1" data-slider-orientation="horizontal" data-slider-tooltip="hide" />

            <div>
                <div id="custom-label-html" class="tab-pane active timeLineIndicator">
                    <div class="demo">
                        <div id="slider-range-custom-label"></div>
                    </div>
                </div>
            </div>

CSS ...

.loggerVideoControlsWrapper .slider-volume-Container .slider-track {
    background-color: #D0D0D0;   
    border-radius: 5px;
    border: 1px solid rgba(159, 168, 176, 1);
    cursor:pointer
}

.volumeControlLi {

}

.slider-volume-Container {
    width: 90px !important;
    height: 31px;
    right: 11px;
    display: block;
    color: #E8E8E8;
    margin-top: 0;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 2px 2px 0 #0F2035;
    background: #14212C;
    padding-top:11px !important;
    padding-right: 5px !important;
}



.timeLineIndicator {
    margin-top: -12px;
    width:100%;
    min-height:10px;
}

    .timeLineIndicator .ui-slider-horizontal .ui-slider-handle {
        display: none;

    }

    .timeLineIndicator .range-label {
        display: none;

    }

    .timeLineIndicator .ui-slider {

        opacity: 1 !important;
        height: 11px;
        border: none;
        border-radius: 0px;
    }

    #logger-first-level-control-bar input.timings {
        width: 80px;
        padding: 4px 6px;
    }

    #logger-first-level-control-bar .btn {
        padding: 2px 4px;
    }

    #logger-first-level-control-bar .edit-btn-list {
        padding: 0;
    }

#timecode-overlay {
    width: 100px;
    height: 30px;
    z-index: 999;
    position: absolute;
    color: rgb(51, 51, 51);
    font-weight: bold;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-size: 14px;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Answer 1

只是要做

overflow:hidden;

在timeLineIndicator