Динамически обновить источник AblePlayer (HTML5 видео)

Question

Для моего веб-сайта нам необходимо динамически обновлять источник AblePlayer в зависимости от вводимых пользователем данных. Мы используем CMS, а в CMS пользователь вводит идентификатор файла, который нам нужен. Затем с этим идентификатором мы делаем вызовы ajax API, который мы используем. Ответ на эти вызовы ajax содержит информацию, которая мне нужна. Соответствующий код:

<video data-able-player
  id="a-player"
  preload="auto"
  data-youtube-id=""
  data-transcript-div="transcript"
  playsinline >
</video>

Затем в моем файле JS я обновляю атрибут data-youtube-id:

$("#a-player").attr("data-youtube-id", src_id);

Прямо сейчас, я подключил его к нажатию кнопки для тестирования. В производстве, я думаю, это будет при загрузке страницы.

Когда я проверяю элемент видео, источник обновляется, как и должен, но видео по-прежнему не воспроизводится.

Мы используем веточку для шаблонов, если это вообще имеет значение.

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

Answer 1

На случай, если кто-нибудь в будущем столкнется с этой же проблемой, мы исправили ее, настроив поля по-разному на стороне Craft. Мы настроили поле для принятия пользовательской записи, содержащей файл VTT, язык и тип (аудио описание, стенограмма, субтитры). Затем в файле .twig:

<video id="video-{{block.youtubeId}}" preload="auto"
      data-able-player
      data-transcript-div="able-transcript-{{block.youtubeId}}"
      data-youtube-id="{{block.youtubeId}}" >
       {% for resource in block.videoResources %} {# Resource entry itself #}
        {% for file in resource.initiativesResourceEntry %} {# File types #}
          {% for v in file.vttFile %} {# Actual file #}
            {% set req_url = siteUrl ~"file/get_file?path="~v.getUrl() %}
              <track kind="{{file.fileType}}" src="{{req_url}}" srclang="{{file.fileLang}}">
          {% endfor %} {# End actual file #}
        {% endfor %} {# End types #}
        {% endfor %} {# End resource entry loop #}
    </video>

Это немного уродливо, но работает. Он создает видеоплеер, затем добавляет столько файлов, сколько у него есть треков. Таким образом, видео может содержать описание аудио, субтитры, субтитры или любую их комбинацию на любом поддерживаемом языке.

Мы используем Craft 2, поэтому я не знаю, является ли это Craft 2 или нет, но я не смог, например, получить доступ к block.videoResources.initiativesResourceEntry напрямую. Я должен был пройти через каждый шаг, что раздражает, но эй это сработало.