Как сделать так, чтобы мое видео html5 запускалось при изменении значения ползунков диапазона - PullRequest
Новая
       4

Как сделать так, чтобы мое видео html5 запускалось при изменении значения ползунков диапазона

0 голосов
/ 18 июня 2020

Я создаю видео html5 с ползунком диапазона, я хочу, чтобы, если я должен переместить ползунок, видео должно начинаться и останавливаться автоматически в зависимости от значения ползунка диапазона, я сделал это, но это займет много времени видео начнется, как я могу заставить видео запускаться, как только значение ползунка диапазона изменится

Вот мой код 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>

Вот мой code 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();
}

Ребята, пожалуйста, как я могу заставить видео запускаться, как только значение ползунка диапазона изменится

1 Ответ

0 голосов
/ 19 июня 2020

Согласно MDN :

Событие изменения не обязательно запускается для каждого изменения значения элемента.

Например, ввод текста запускать событие change только тогда, когда ввод теряет фокус.

Вместо этого вы можете использовать событие input .

Событие input срабатывает каждый раз при изменении value элемента. Это отличается от события change, которое срабатывает только при фиксации значения, например, при нажатии клавиши ввода, выборе значения из списка параметров и т. Д.

...