The kirby-subtitler from sylvainjule

sylvainjule / kirby-subtitler Goto Github PK

View Code? Open in Web Editor NEW

Kirby field for synchronizing content with audio/video files. Kirby 2 and 3.

License: MIT License

JavaScript 0.54% PHP 14.71% Vue 40.96% SCSS 43.79%

kirby-subtitler's People

Contributors

Stargazers

Watchers

kirby-subtitler's Issues

screenshot

Suggestion: Creating subtitles/caption

The moment I saw the short GIF I thought, wow an editor to create video captions/subtitles on the fly inside of the Kirby Panel.

As far as I can see it should be possible to create the needed WebVTT file from the generated content. What it needs is a snippet that formates the structure according to the spec. and then returns it to the track child element of the video element. 🤔

A great resource with more information over on MDN

I cannot success it works

Hi!

Thank you so much for such a great plugin. But I try those code but It doesn't work Could you please help me?

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

<?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; ?>

Recommend Projects