如何提高 LitElement 中设置 HTML video currentTime 的性能

Question

我正在使用范围输入滑块来捕获用户输入：

<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;
}

这行得通，我可以用滑块控制视频的当前时间。但是，它非常滞后，性能不如我想象的那么好。 有什么 smarter/more 高效的方法可以做到这一点吗？

谢谢！

Answer 1

在每个输入事件上选择元素的性能可能不是很好，应该只做一次（即在 firstUpdated() 中）。但是，如果您没有手动选择元素的特定原因，请考虑改用 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}>
    `;
  }
}

这是一个demo。

如何提高 LitElement 中设置 HTML video currentTime 的性能

How to improve performance of setting HTML video currentTime in LitElement

html

html5-video

lit-element