🎬 ▶️ Video Preview & Thumbnails: Improved Support for Videos in Files & Collections

[MMTHD]

Summary

Currently, managing and selecting videos in Directus for website usage is cumbersome and disrupts the workflow. The absence of previews and thumbnails in the video selection process makes it challenging to identify and choose suitable videos. This feature request aims to enhance Directus by introducing video previews and generated thumbnails, streamlining the video management experience.

Basic Example

N/A

Motivation

The implementation of video previews and generated thumbnails in Directus offers several benefits. It enables users to quickly assess video content and quality within the media pool, enhancing efficiency when selecting videos for posts, pages, or other content. Better support for video media types will optimize workflow and significantly improve the user experience.

Detailed Design

To improve support for video media types, we propose the following features be implemented in Directus:

1. Preview: Introduce a visual preview functionality for videos within the media pool, allowing users to play and review video content without leaving the page.

2. Thumbnails: Generate thumbnails automatically for videos, providing a visual representation that aids recognition and differentiation between videos.

Requirements List

Must Have:

• Introduction of a preview functionality for videos within the media pool or in collection where the Mediafile is selected.
• Generation of thumbnails for videos.

Should Have:

• Enhanced user-friendliness in video management within the Directus interface.

Could Have:

• Customizable preview options to cater to user preferences.
• Support for various video formats.

Won't Have:

• Integration of video editing tools within Directus.

Drawbacks

• Implementation Effort: The introduction of video previews and thumbnails may require additional development work and resources.
• Complexity: Adding these features could increase code complexity and necessitate careful integration with the existing Directus system.
• Migration Effort: For existing Directus applications, this could be a change with potential impact, potentially requiring a migration plan.

Alternatives

• An alternative approach could be to allow users to upload custom preview images or thumbnails for videos.
• Another option is to integrate a third-party video player service that offers preview and thumbnail functionality.

Adoption Strategy

• Existing Directus developers can adopt the new features by updating their video media and benefiting from the advantages of previews and thumbnails.
• It is essential to ensure that the introduction of these features does not adversely affect existing projects within the Directus ecosystem. A migration plan and clear documentation should be provided to facilitate a smooth transition.

Unresolved Questions

No response

[BlackDahlia313]

I think this would be great as an extension itself interacting with MUX. I believe it could also be handled via flows with their api now in the meantime.

I have mentioned something like in the past, so it's on my todo.

[MMTHD]

MUX is an interesting option, but I think it should also be possible on the specially hosted server without a cloud service. theoretically you could also build a small nodejs script with "Remotion" which renders a thumbnail of the image and triggers it via flows. But for the case, I would personally expect something like that to already exist in the core. Among all the DMS that exist, I think Directus can be compared to Apple, while Strapi is more in the direction of Windows and Payload like Linux.. But Apple would definitely implement it🙈😄

https://www.remotion.dev/docs/renderer/render-still

[BlackDahlia313]

Revisiting this, Bunny CDN has tool called "Streams" where you can add video libraries and receive direct download links as well as m3u8 streams. with everything provided.. thumbnails, webp previews, drm, cdn etc. its really neat.

It's really cheap and only charges you for storage and delivery. No transcoding costs.

This kinda changes things for myself when thinking about implementing this for that specific use case. I know a in-house solution would be awesome and I agree, but I will look into creating a Bunny Stream plugin as soon as I'm done with some upcoming directus related client work.

[rijkvanzanten]

Another feature request touching on FFMPEG: #19223

[rijkvanzanten]

Heya! Thanks for opening this feature request!

This feature request has received over 15 votes from the community. This means we'll move this feature request to the Under Review state!

The Core team will schedule a meeting to review this request as soon as possible. The discussion will then be approved or denied. You may or may not be invited to join this meeting with the core team.

For more information, see our Feature Request Process.

[DangerDrome]

how did this feature request go? :)