Home>

We are creating the original UI for video players.
It's an implementation of a button that changes the playback speed, but I'm worried about whether to use element text or custom attributes.
Which code is best for speed?
Please let me know if there are other optimal solutions.

Code
<div>
  ︙
  <video src = "../ img/movie1.mp4" preload = "auto"></video>
  ︙
  <button data-video-speed = "0.5">0.5</button>
  <button data-video-speed = "0.75">0.75</button>
  <button data-video-speed = "1.0">1</button>
  <button data-video-speed = "1.25">1.25</button>
  <button data-video-speed = "1.5">1.5</button>
</div>
const
  video = document.getElementById ('video-src'),
  videoSpeedBtn = document.getElementsByClassName ('video-speed-btn');
  ︙
JavaScript example 1
for (let i = 0, len = videoSpeedBtn.length;i<len;i ++) {
  videoSpeedBtn [i] .addEventListener ('click', () =>{
    video.playbackRate = videoSpeedBtn [i] .dataset.videoSpeed;
  }, false);
}
JavaScript example 2
for (let i = 0, len = videoSpeedBtn.length;i<len;i ++) {
  videoSpeedBtn [i] .addEventListener ('click', () =>{
    video.playbackRate = videoSpeedBtn [i] .textContent;
  }, false);
}
  • Answer # 1

    Although it seems that the best answer has already been given, I think that custom attributes are good for the two choices of the question text.
    If it's a single-use short code, you can use element text.

    First, there is no problem as long as the response is within 100 milliseconds.
    Perhaps there is no difference of 1 millisecond with either method.

    What matters more than speed is ease of development.
    I think that a certain degree of maintainability is required to guess from the CSS class name (BEM).
    The element text is visible to the user and is therefore susceptible to changes in specifications due to external factors.
    In Example 2, if the appearance changes, the internal logic will be directly affected.

    For example, the character string displayed on the button is "0.5", "1.0" and "2.0".

Related articles