sylvainjule/subtitler

在Kirby中与音频/视频文件同步内容

维护者

详细信息

github.com/sylvainjule/kirby-subtitler

源代码

问题

安装: 37

依赖: 0

建议: 0

安全: 0

星标: 38

关注者: 3

分支: 2

开放问题: 0

语言：SCSS

类型：kirby-plugin

1.0.3 2020-12-23 19:13 UTC

Requires

MIT a732e6005c58315b59e819954a92a67bda7790f2

  • Sylvain Julé <contact.woop@sylvain-jule.fr>

This package is auto-updated.

Last update: 2024-09-07 00:12:19 UTC

README

此插件允许您同步任何内容与音频或视频文件。

subtitler-screenshot


概述

此插件完全免费，并使用MIT许可证发布。但是，如果您在商业项目中使用它并希望帮助我维持维护，请考虑捐赠或通过我的联盟链接购买您的许可证。

TLDR - 快速开始👀


1. 安装

如果您想使用Kirby 2，请切换到kirby-2分支。

下载并将此存储库复制到/site/plugins/subtitler

或者，您可以使用Composer安装它：composer require sylvainjule/subtitler


2. 蓝图使用

字幕器是一个不存储任何信息的部分。相反，它提供了一个界面来操纵来自其他字段的内容。以下是在您的蓝图内插件的基本设置

2.1. 示例

columns:
  - width: 2/3
    sections:
      subtitler:
        type: subtitler
        timelines:
          mytimeline:
            id: mytimeline
            label: My timeline
            color: purple
        storage:
          src: src
          subs: subs

  - width: 1/3
    sections:
      myfields:
        type: fields
        fields:
          src:
            type: files
            max: 1
          subs:
            type: structure
            sortable: false
            fields:
              note:
                label: Note
                type: text

注意结构字段的sortable: false，否则结构将很容易在增量中被丢失。

您还应确保结构字段仅包含字幕。为此，您可以隐藏字段的添加+按钮。这样，除了字幕器部分之外，就没有其他填充它的选项了。

这应在自定义的panel.css中设置

.k-field-subs .k-field-header button {
    display: none;
}

2.2. 在文件页面中使用

您可以通过设置上述内容使用此插件，但跳过storage设置中的src选项。插件将自动检测给定页面的图片。


3. 选项

3.1. 时间线

这个新版本可以处理给定视频/音频文件的多条时间线，而不是需要重复字段。必须在timelines选项中指定时间线，并给出3个属性

  • 一个id（将用于划分结构条目）
  • 一个label（将在编辑器中显示）
  • 一个color（将在编辑器中显示，必须是blue、green、red、orange或purple）

这是一个具有多个时间线的示例

timelines:
  chapters:
    id: chapters
    label: Chapters
    color: purple
  links:
    id: links
    label: Links
    color: orange
  images:
    id: images
    label: Images
    color: blue

标签也支持多语言语法

timelines:
  chapters:
    id: chapters
    label: 
      en: Chapters
      fr: Chapitres
    color: purple

3.2. 显示选项

• 主题

type: string，默认：light

您有两个主题可供选择，一个是深色，一个是浅色。（目前还不工作，但您很快就会拥有它们）

subtitler-themes

• 调试

type: boolean，默认：false

当设置为true时，时间码和基于光标位置的位置将在实时工具栏中显示。除非您正在尝试扩展某些功能，否则不需要此功能。

subtitler-debug

3.3. 存储选项

• 音频/视频文件

该部分需要与返回文件对象的字段同步，以便进行工作。必须使用 files 字段。这不仅看起来比选择字段更美观，更重要的是，它返回文件的绝对URL和ID。

# subtitler section
storage:
  src: src

# fields section
src:
  type: files
  max: 1

注意：您不需要明确设置 max 值，尽管这可能更清晰。当面对包含多个文件的文件字段时，插件将始终使用第一个。

• 字幕结构

插件需要一个关联的结构字段来存储字幕信息。它有5个预留字段，不应用于任何其他目的：timeline、start、startprop、end 和 endprop。这些字段将自动设置，除非您想在面板中显示它们，否则不需要明确指定。

subtitler-fields

# subtitler section
storage:
  subs: subs

# fields section
subs:
  type: structure
  fields:
    timeline:
      label: 'Timeline'
      type: text
    start:
      label: 'Start'
      type: text
    startprop:
      label: 'Start (%)'
      type: text
    end:
      label: 'End'
      type: text
    endprop:
      label: 'End (%)'
      type: text

否则，您可以直接添加您想要同步内容的字段。

subtitler-notes

# subtitler section
storage:
  subs: subs

# fields section
subs:
  type: structure
  fields:
    mynote:
      label: 'Note'
      type: text

4. 模板使用

根据您的用例，可以使用不同的方式来使用字幕。例如，您可以将其作为 json 发送到一个JavaScript应用程序。或者，您可以使用插件附带的一些简单助手直接在模板中使用它们。

4.1. 信息是如何存储的？

每个条目都将有一个 start、startprop、end 和 endprop 值，格式如下

start / end : 364.58745  # (number of seconds)
startprop / endprop : 0.35  # (the progress relative to the file's duration, between 0 and 1)
# + all your custom field

4.2. 创建字幕集合

字幕存储在结构字段中。如果您只有一个时间轴，您可以使用 toStructure() 方法创建一个集合来访问它们

foreach($page->mysubtitles()->toStructure() as $subtitle) {
    // do something
}

当处理多个时间轴时，您需要手动过滤它们或调用 getTimeline 方法，这是一个提供按时间轴过滤的 toStructure 包装器。这样使用

foreach($page->mysubtitles()->getTimeline('timelinekey') as $subtitle) {
    // do something
}

4.3. 生成和使用轨道文件

• 创建轨道

插件提供了一个简单的方法来生成 WebVTT 文件，这些文件可以稍后添加到您的html <track> 标签中。

首先，请确保用于获取字幕内容的字段名为 subtitle，否则插件不知道在哪里查找文本。

subs:
  label: Subtitles
  type: structure
  fields:
    subtitle:
      label: Content
      type: text

然后，在您的页面上包含 tracksbuilder 字段，它基本上是一个按钮，在请求时生成 .vtt 文件（存储在页面的文件夹中）。

mytracks:
  label: Generate tracks
  type: tracksbuilder
  src: subs # (key of the structure field containing the subtitles)

输出将如下所示

# if single language
${fieldname}-${timeline}.vtt # (content/my/page/subs-notes.vtt)

# if multi-language
${fieldname}-${timeline}-${languageCode}.vtt # (content/my/page/subs-notes-en.vtt)

现在您可以通过在字幕结构字段上调用 ->vtt('timeline') 来轻松获取它们（以下为示例）。

• 单语言设置

一旦创建了 .vtt 文件，您就可以在 video 标签中 包含它们。以下是一个基本示例，使用名为 notes 的时间轴

<?php // we make sure that the video file exists
      if($video = $page->src()->toFile()): ?>
<video id="video" controls preload="metadata">
   <source src="<?php echo $video->url() ?>" type="<?php echo $video->mime() ?>">
   
   <?php // we make sure that the .vtt file exists
         if($track = $page->subs()->vtt('notes')): ?>
   <track label="English" kind="subtitles" srclang="en" src="<?php echo $track->url() ?>" default>
   <?php endif; ?>
</video>
<?php endif; ?>

• 多语言设置

多语言设置与单语言设置几乎相同，只是我们需要在循环中将 track 标签放入并明确设置所需的语言。

<?php // we make sure that the video file exists
      if($video = $page->src()->toFile()): ?>
<video id="video" controls preload="metadata">
    <source src="<?php echo $video->url() ?>" type="<?php echo $video->mime() ?>">
    
    <?php // we loop through every language
          foreach($kirby->languages() as $language): ?>
        <?php // we make sure that the .vtt file exists
              if($track = $page->subs()->vtt('notes', $language->code())): ?>
        <track label="<?php echo $language->name() ?>" kind="subtitles" srclang="<?php echo $language->code() ?>" src="<?php echo $track->url() ?>" default>
        <?php endif; ?>
    <?php endforeach; ?>
</video>
<?php endif; ?>

5. 许可证

MIT


6. 致谢

  • 字段同步来自 @rasteiner 的地图部分。🙏