我怎样才能让我的 html5 视频随着范围滑块值的变化而开始

Question

i am building a html5 video with a range slider, i want if i should move the slider, the video should start and stop automatically depending on the value of the range slider, i have done that but it takes long before the video would start,一旦 slider 范围的值发生变化，我如何让视频开始播放

这是我的代码 test.page.html

<video id="video" playsinline src="{{videoSrc}}#t={{range.min}},{{range.max}}" #video (loadedmetadata)="onMetadata(video)"></video>
<div class="wrap" role="group" aria-labelledby="multi-lbl">
                <label class="sr-only" for="a">Value A:</label>
                <input name="center" id="a" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.center"/>
                <label class="sr-only" for="a">Value A:</label>
                <input (ngModelChange)="onChangeVal(1)" name="min" id="a" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.min"/>
                <label class="sr-only" for="b">Value B:</label>
                <input (ngModelChange)="onChangeVal(2)" name="max" id="b" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.max"/>
            </div>

这是我的代码 test.page.ts

onChangeVal(w) {
    let video:any = document.getElementById("video");
    video.pause()
    if(w==1) this.range.max=(this.range.max <= this.VidDuration) ? this.range.min+this.max : this.VidDuration
    else if((this.range.max-this.range.min)>this.max) this.range.min=this.range.max-this.max 
    else if(this.range.max <= this.range.min) this.range.max=this.range.min
    video.currentTime = this.range.min;
    video.play();
}

请问各位，一旦 slider 范围的值发生变化，我该如何让视频开始播放

Answer 1

根据MDN ：

不必为元素值的每次更改触发 change 事件。

例如，文本输入仅在输入失去焦点时触发change事件。

您可以改用input事件。

每次元素的value发生变化时都会触发input事件。 这与change事件不同，后者仅在提交值时触发，例如通过按下 enter 键、从选项列表中选择一个值等。