Hello, guys!
How to make a preview in the panel (K3) for the mp4-video files?
In the same way as the pictures.
Thanks!
1 Like
Hey, @Stephan. Welcome to the forum.
You mean for files fields or files sections, I guess? There’s no out of the box solution for videos, you can only define images. What do you expect to have, a poster? A mini-video? A custom field or section would be the way to go.
Hi! 
I meant video posters. So that you can understand what this video is about.
Just like the photo:
Have you tried to use the files section’s image option to query an image?
I thought something like this could work:
image:
query: page.images.first
but seems that is not possible (yet). That’s just an example query, in reality you’d have to use a model that fetches the intended file from the files meta data or by using a poster with the same name of something like that.
I’m looking for a solution to this exact same problem (actually came to the forum to post this, but found this post).
So the way this should/could work is:
- when a mp4 is uploaded, create a poster image automatically (I don’t want people to have to upload poster images themselves) which can be done with PHP I believe
- find that image
- make sure the blueprint points to that image
Right?
Any pointer on how to set this up?
If you auto-generate such a poster image from the video, you can give it the same name as the video file. Then you can solve this with a file method
Example files section:
test:
type: files
layout: cards
template: video
image:
query: file.videoposter
cover: true
File method defined in plugin:
<?php
Kirby::plugin('texnixe/methods', [
'fileMethods' => [
'videoposter' => function() {
$filename = $this->name() . '.jpg';
if($poster = $this->parent()->image($filename)) {
return $poster;
} else {
return null;
}
}
]
]);
For extracting a poster from the video, you can use a file.upload:after in combination with the PHP-FFMpeg library.
1 Like
Guys, thanks so much for the tip!
I still have one question: is it possible to embed a video preview here(?) :
or here
Not out of the box. You could achieve that with a custom section.
Ok, thanks!
Tell me, please, where read about it?
Basics: https://getkirby.com/docs/reference/plugins/extensions/sections
Other than that, it’s best to check out some example section plugins, e.g. this one: https://github.com/sylvainjule/kirby-pagetable
And the UI kit you can build upon: https://getkirby.com/docs/reference/plugins/ui
Thanks! Will look into this.
Thank you, Texnixe!
I had the same problem and thanks to your plugin, I got his to work.
I solved it with the exec() command just using ffmpeg.
For reference, here is the hook command I set up (extracting a thumbnail from the frame at 3 seconds):
'hooks' => [
'file.create:after' => function ($file) {
if($file->type() === 'video') {
exec('ffmpeg -y -i ' . $file->root() . ' -ss 3 -t 1 ' . $file->parent()->root() . '/' . F::name($file->filename()) . '.jpg');
}
}
]
So, this results in a card section like this (images and videos side by side):
Nice! However, the preview section in the file’s page is still empty:
Is there any way to easily feed the already generated thumb into this preview section somehow? Via the file blueprint perhaps?
Thanks!
3 Likes
You could greate a custom file model used for these files:
And within that model overwrite the standard panelImageSource method:
Returning the preview image instead.
For having a preview player in the FileView, you would need to overwrite/extend:
Not so trivial to be honest - you would need quite some experience with Vue etc.
I’m afraid I don’t quite understand. Why do I need to create a new file model? I am basically dealing with video files, is there no way to alter the behavior for video files only?
Unfortunately I have no idea how to do that. Do you have any pointers for me? Thanks!
Maybe I find the time tomorrow to look into that. Last time I tried out file models they didn’t work as I expected them to work.
@distantnative: Just to confirm: A file model is supposed to work on a file blueprint basis, right? So if I assign a customvideos blueprint to a file, I can create a CustomvideosFile model for it and it will work anywhere I use this file?
Yes, that’s the plan. If this isn’t working right now, we have stumbled upon a bug.