Назначение сравнения переменных для оператора if / else

Question

Я использую условный оператор, который возвращает результат, основанный на том, когда пользователь нажимает во время видео.

В настоящее время у меня фиксированные значения сравнения, так как у меня было только одно видео, но теперь я добавляю больше видео, которые я хочу сделать этими значениями переменными в зависимости от того, какое видео воспроизводится. Каждое видео будет иметь разное время для каждой главы

//currently fixed values for one video    
$('#response').on('click', function() {
      var mycurrentTime = myVid.currentTime;
        if (mycurrentTime < 20) { //can '20' become "x"?
          result = "chapter 1" ;
        } else if (mycurrentTime < 40) {//can '40' become "y"?
          result = "chapter 2" ;
        } else {
          result = "chapter 3" ;
        }

После завершения первого видео пользователь нажимает кнопку, чтобы перейти к следующему видео, которое изменяет содержимое тега видео с помощью метода innerHTML.

document.getElementById("videoElement").innerHTML = '<source src="video2.mp4">';

Я не уверен, что это возможно, но я надеялся на что-то вроде добавления «id = vid1» к тегам источника видео, так что если # vid1, то x = 25 y = 47. Каков наилучший способ назначить значения для каждого видео и глав и назначить их условному выражению?

Answer 1

Я бы рекомендовал использовать data атрибуты.

document.getElementById("videoElement").innerHTML = '<source src="video2.mp4" data-x="25" data-y="25">';

, чтобы получить значение:

document.getElementById("videoElement").getAttribute('data-x');

, чтобы установить значение:

document.getElementById("videoElement").setAttribute('data-x', val);