Kirby Subtitler – Synchronize content with audio / video files

Plugins
1

Kirby Subtitler is another tweaked structure field allowing you to sync any content you’d like with audio or video files.

Here is a short video preview of what it does.

subtitler-screenshot
35878510-c7539eb0-0b78-11e8-9a5f-360202b1f912.jpg1500×913 

  videofile:
    label: Video file the subtitler field will use
    type: select
    options: videos
  subtitlerfield:
    label: My synchronized content
    type: subtitler
    src: videofile
    fields: 
      start:
        type: hidden
      startprop:
        type: hidden
      end:
        type: hidden
      endprop:
        type: hidden
      customfield:
        label: Content
        type: text (or any kind of field)

This one also started as a custom field for a very specific client project, I have tried to make it a bit more versatile since then. But I haven’t tested every default structure options yet, and these interactions can be tricky so any help or feedback from your eventual uses of it are very welcome :slight_smile:

Obviously it doesn’t aim to replace a subtitle editor for extensive work / large amount of subtitles, but it can be quite handy to be able to quickly connect timings with Kirby’s page / field objects directly.

More informations on GitHub :

https://github.com/sylvainjule/kirby-subtitler

9 Likes
2

Haven’t tested yet but sounds really interesting :star:.

Could you please add a package.json to make the plugin installable via the Kirby CLI?

3

Really nice plugin, fast installation and easy to use!

I’m currently working on a website with multiple videos and subtitles. I worked with VideoSub.js wich allow you to import SRT file and display it on the track video element.
I read that the track element is the best implementation for subtitles, don’t you think data-values can put the mess somewhere with Ogv, Webm, or Flash fallbacks ?

I didn’t tested this yet because I don’t understand how do you get the subtitbles with var values = JSON.parse(videoElement.getAttribute('data-values'));.
What would a JS script looks like to embed the texts in the html?

4

@texnixe thank you, package.json added !

@Oziris thanks ! If you’re all set with the track element and wish to display regular subtitles you should absolutely stick with it.

My little code snippet is just an example of how to pass a few values as arrays to a JS file, it should of course be extended in a real use (ie. pass additional data with the timings, and then do something with them). This Smashing Magazine article is old but could get you started on how to proceed.

In a nutshell : you’d be fine adding data-attributes to player elements, a better way to do it would be to access the structure with a call to a content representation, but if you don’t want to sync any ‘off-the-track’ content you’re better off with the track element :slight_smile: