动态更新AblePlayer的(html5视频)源
动态更新AblePlayer的(html5视频)源
提问于 2018-05-11 00: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);现在，为了测试的目的，我把它挂在了一个点击按钮上。在生产中，我认为它将在页面加载上。
当我检查video元素时，源文件会像应该的那样更新，但是视频仍然不能播放。
我们使用twig作为模板，如果这很重要的话。
我知道这是一种小众的情况，但我想知道是否有人遇到过类似的问题，并知道如何解决它？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-15 04:58:36
如果将来任何人遇到同样的问题，我们通过在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。我不得不遍历每一步，这很烦人，但嘿，它起作用了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50277931
复制相关文章
相似问题