动态更新 AblePlayer 的（html5 视频）源答案

【问题标题】：Dynamically Update AblePlayer's (html5 video) Source动态更新 AblePlayer 的（html5 视频）源
【发布时间】：2018-05-10 16:57:20
【问题描述】：

对于我的网站，我们需要根据一些用户输入动态更新 AblePlayer 的来源。我们正在使用 CMS，在 CMS 中，用户输入我们需要的文件 ID。然后，使用该 ID，我们对正在使用的 API 进行 ajax 调用。对这些 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);

现在，出于测试目的，我将它与单击按钮挂钩。在生产中，我认为它会在页面加载时。

当我检查视频元素时，源会按应有的方式更新，但视频仍然无法播放。

我们使用 twig 作为模板，如果这很重要的话。

我知道这是一个小众案例，但我想知道是否有人遇到过类似的问题并知道如何解决？

【问题讨论】：

标签： jquery twig html5-video

【解决方案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。我不得不循环执行每一步，这很烦人，但它确实有效。

【讨论】：