# Video (mp4) preview in panel **URL:** \ **Category:** Questions\ **Tags:** v3\ **Created:** [April 23, 2019, 5:46pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902 "2019-04-23T17:46:46Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Stephan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/stephan/32/6611_2.png) [@Stephan](https://forum.getkirby.com/u/Stephan)\ **Post date:** [April 23, 2019, 5:46pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/1 "2019-04-23T17:46:46Z")
Hello, guys! How to make a preview in the panel (K3) for the mp4-video files? In the same way as the pictures. Thanks! ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [April 23, 2019, 9:02pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/2 "2019-04-23T21:02:58Z")
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. ---
**Author:** ![Stephan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/stephan/32/6611_2.png) [@Stephan](https://forum.getkirby.com/u/Stephan)\ **Post date:** [April 24, 2019, 9:53am UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/3 "2019-04-24T09:53:42Z")
Hi! 🙂 I meant video posters. So that you can understand what this video is about. Just like the photo: ![2019-04-24_125306](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/1/1eb382b0a42e22b60023c30ebca86e42def374f8.jpeg) ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [April 24, 2019, 10:09am UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/4 "2019-04-24T10:09:16Z")
Have you tried to use the files section’s `image` option to query an image? ---
**Author:** ![Stephan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/stephan/32/6611_2.png) [@Stephan](https://forum.getkirby.com/u/Stephan)\ **Post date:** [April 24, 2019, 1:10pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/5 "2019-04-24T13:10:33Z")
As far as I understand. Something like this: ![2019-04-24_160103](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/f/f68280b672eff0b9c15376e394dec0e4873a0cc9.png) ![2019-04-24_160900](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/a/ab89cef652a6ac72cea855a0851e59f334dc180a.png) ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [April 24, 2019, 1:53pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/6 "2019-04-24T13:53:39Z")
I thought something like this could work: ```auto 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. ---
**Author:** ![snaders](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/snaders/32/6627_2.png) [@snaders](https://forum.getkirby.com/u/snaders)\ **Post date:** [April 25, 2019, 8:57am UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/7 "2019-04-25T08:57:29Z")
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? ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [April 25, 2019, 7:41pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/8 "2019-04-25T19:41:48Z")
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: ```auto test: type: files layout: cards template: video image: query: file.videoposter cover: true ``` File method defined in plugin: ```php [ '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](https://github.com/PHP-FFMpeg/PHP-FFMpeg). ---
**Author:** ![Stephan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/stephan/32/6611_2.png) [@Stephan](https://forum.getkirby.com/u/Stephan)\ **Post date:** [April 29, 2019, 2:46pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/9 "2019-04-29T14:46:58Z")
Guys, thanks so much for the tip! I still have one question: is it possible to embed a video preview here(?) : ![video-2](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/be5918908dff96a8e9a2868f0eccb2aa3eef20bf.jpeg) or here ![video-1](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/c/cd7c1cac8fceb87e29ab3a61305f4f0ed6446d99.jpeg) ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [April 29, 2019, 3:13pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/10 "2019-04-29T15:13:13Z")
Not out of the box. You could achieve that with a custom section. ---
**Author:** ![Stephan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/stephan/32/6611_2.png) [@Stephan](https://forum.getkirby.com/u/Stephan)\ **Post date:** [April 29, 2019, 4:05pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/11 "2019-04-29T16:05:35Z")
Ok, thanks! Tell me, please, where read about it? ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [April 29, 2019, 4:33pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/12 "2019-04-29T16:33:55Z")
Basics: [https://getkirby.com/docs/reference/plugins/extensions/sections](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](https://github.com/sylvainjule/kirby-pagetable) And the UI kit you can build upon: [https://getkirby.com/docs/reference/plugins/ui](https://getkirby.com/docs/reference/plugins/ui) ---
**Author:** ![snaders](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/snaders/32/6627_2.png) [@snaders](https://forum.getkirby.com/u/snaders)\ **Post date:** [April 30, 2019, 7:52am UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/13 "2019-04-30T07:52:53Z")
Thanks! Will look into this. ---
**Author:** ![Stephan](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/stephan/32/6611_2.png) [@Stephan](https://forum.getkirby.com/u/Stephan)\ **Post date:** [May 2, 2019, 8:51am UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/14 "2019-05-02T08:51:36Z")
Thank you, Texnixe! ---
**Author:** ![trych](https://avatars.discourse-cdn.com/v4/letter/t/5e9695/32.png) [@trych](https://forum.getkirby.com/u/trych)\ **Post date:** [July 22, 2019, 11:40am UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/15 "2019-07-22T11:40:22Z")
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): ```auto '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): ![20190722-133749_Screenshot_GoogleChrome](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/0/09951590b937e120e068852197f59d5d599e685b.jpeg) Nice! However, the preview section in the file’s page is still empty: ![20190722-133855_Screenshot_GoogleChrome](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/4/40d08ee46a02f414631966667e36cc17c17a6eb9.png) Is there any way to easily feed the already generated thumb into this preview section somehow? Via the file blueprint perhaps? Thanks! ---
**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\ **Post date:** [July 22, 2019, 12:30pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/16 "2019-07-22T12:30:09Z")
You could greate a custom file model used for these files: > **[File models](https://getkirby.com/docs/reference/plugins/extensions/file-models)** > > Kirby is the content management system that adapts to your projects like no other. And within that model overwrite the standard `panelImageSource` method: > Returning the preview image instead. ---
**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\ **Post date:** [July 22, 2019, 12:32pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/17 "2019-07-22T12:32:41Z")
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. ---
**Author:** ![trych](https://avatars.discourse-cdn.com/v4/letter/t/5e9695/32.png) [@trych](https://forum.getkirby.com/u/trych)\ **Post date:** [July 22, 2019, 8:38pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/18 "2019-07-22T20:38:04Z")
> [@distantnative](#): > > You could greate a custom file model used for these files 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? > [@distantnative](#): > > And within that model overwrite the standard `panelImageSource` method. Unfortunately I have no idea how to do that. Do you have any pointers for me? Thanks! ---
**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\ **Post date:** [July 22, 2019, 9:44pm UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/19 "2019-07-22T21:44:40Z")
> [@trych](#): > > 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? ---
**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\ **Post date:** [July 23, 2019, 7:20am UTC](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902/20 "2019-07-23T07:20:56Z")
> [@texnixe](#): > > 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. [Next page](https://forum.getkirby.com/t/video-mp4-preview-in-panel/13902.md?page=2)