Как повысить производительность установки HTML текущего времени видео в LitElement - PullRequest
Новая
       25

Как повысить производительность установки HTML текущего времени видео в LitElement

0 голосов
/ 29 мая 2020

Я использую ползунок ввода диапазона для захвата пользовательского ввода: 

<input class="slider" type="range" oninput="change">

Также есть видео: 

<video class"output" src="video.mp4"></video>

Моя JavaScript функция change выглядит примерно так: 

change(e){
this.shadowRoot.querySelector('.output').currentTime = this.shadowRoot.querySelector('.slider').value;
}

Это работает, и я могу контролировать текущее время видео с помощью ползунка. Тем не менее, он довольно медленный, а производительность не так хороша, как я думаю. Есть ли более умный / производительный способ сделать это?

Спасибо!

1 Ответ

1 голос
/ 01 июня 2020

Выбор элементов для каждого входного события, вероятно, не очень эффективен и должен выполняться только один раз (ie в firstUpdated()). Однако, если у вас нет конкретной c причины для выбора элементов вручную, рассмотрите возможность использования lit- html bindings вместо: 

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('my-video')
export class MyVideo extends LitElement {
  @property() currentTime = 0;

  render() {
    return html`
      <video src="..." .currentTime=${this.currentTime}></video>
      <input type="range" @input=${e => this.currentTime = e.target.value}>
    `;
  }
}

Вот демонстрация .

...