sylvainjule / kirby-subtitler Goto Github PK
View Code? Open in Web Editor NEWKirby field for synchronizing content with audio/video files. Kirby 2 and 3.
License: MIT License
Kirby field for synchronizing content with audio/video files. Kirby 2 and 3.
License: MIT License
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; ?>
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.