Video (mp4) preview in panel

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! :slightly_smiling_face:

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?

As far as I understand.
Something like this:


2019-04-24_160900

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.

Guys, thanks so much for the tip!

I still have one question: is it possible to embed a video preview here(?) :

video-2

or here

video-1

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:

20190722-133855_Screenshot_GoogleChrome

Is there any way to easily feed the already generated thumb into this preview section somehow? Via the file blueprint perhaps?

Thanks!

2 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.