html 中的可点击字幕

Question

我正在尝试使用 django 建立一个网站，我想在其中托管带字幕的视频。我的主要目标是让我的字幕 可点击 这样每当用户点击或悬停在一个词上时他们就可以看到该词的含义。我目前使用的是 .vtt 格式的字幕。

有什么想法吗？

下面是 html 代码：

<video id="example_video" class="" controls preload="none" width="640" height="264">
    <source src="{% static 'video/video.mp4' %}" type='video/mp4' />
    <track kind="captions" src="{% static 'captions.vtt' %}" srclang="en" label="English" />
</video>

这也是我的副标题:

WEBVTT

    00:03.000 --> 00:06.000
    trying to make each word a clickable element

    00:08.000 --> 00:09.225
    sample text

Answer 1

TL;DR

不在我的脑海里；一种方法是为您的字幕区域制作一个 div，并使用 flex 和 wrap 和 justify-center 排列其中的所有内容。此 div 将包含 <a> ... </a> 个标签。

然后，您可以为每个时间戳中的每个单词动态填充此模板。

模板

我的意思是：

.sub-word {
  /* padding: 0 5px; */
  padding-right: 1em;
  text-decoration: none;
  color: black;
  font-family: monospace;
  font-size: 18px;
}

.sub-word:hover {
  font-weight: bold;
  text-decoration: underline;
  color: green;
}

#sub-area {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div id="sub-area">
  <a href="link-to-definition-for-Trying" title="to attemp" class="sub-word">
        Trying
    </a>
  <a href="link-to-definition-for-to" title="preposition" class="sub-word">
        to
    </a>
  <a href="link-to-definition-for-make" title="to form" class="sub-word">
        make
    </a>
  <a href="link-to-definition-for-each" title="every" class="sub-word">
        each
    </a>
  <a href="link-to-definition-for-word" title="a meaningful of a laguage I guess" class="sub-word">
        word
    </a>
  <a href="link-to-definition-for-a" title="determiner" class="sub-word">
        a
    </a>
  <a href="link-to-definition-for-clickable" title="able to be clicked on" class="sub-word">
        clickable
    </a>
  <a href="link-to-definition-for-element." title="part of something" class="sub-word">
        element.
    </a>
</div>

如果您将鼠标悬停在任何单词上，它会突出显示，然后会打开一个小弹出窗口，其中包含定义。如果您单击这些词，您可以转到一个专门的页面，其中包含更全面的含义和您想要的内容。

后端和逻辑

您也有不同的选择。一个想法是编写一个类似 JSON 的字幕文件，其中它们由时间戳分隔，然后是单词等等。

{
  "00:00.000" : {
    "trying" : {
      "def": "attempting to",
      "link": "somewhere"
    },
    "to" : {
      "def": "preposition",
      "link": "somewhere"
    }
  },
  "00:03.000": {
    
  }
}

然后您可以使用 JavaScript 动态更改。

编辑：从字幕生成 HTML 的示例：

假设您的字幕始终采用时间戳和字符串的形式，您可以将它们分开，然后将它们放入字典中：

for i in range(0, len(sub), 2):
    index = sub[i]
    words = sub[i+1]
    # making a dict as above
    sub_dict[index] = {word: define(word) for word in words.split()}

然后你可以用这样的东西生成标签：

sub_div = '<div id="sub-area">'
for word in words.split():
    sub_div += f'<a href="{definition_link(word)}" title="{define(word)}" class="sub-word">{word}</a>'
sub_div += '</div>'

当然也有库可以做到这一点。

html 中的可点击字幕

Clickable subtitle in html

html

subtitle

TL;DR

模板

后端和逻辑