Display video preview with fileupload widget


Would it be possible to improve the support of video with the fileupload widget ? Actually, it cannot display a preview of an uploaded video file, which result to a blank canvas.


Best regards,


Try updating to v3.3.18 - we’ve added a technical fix to this. It’s not perfect though.

not sure if this will help, but…

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">

part of preload="metadata" tells, that first seconds of contents are loaded and #t=0.5 is a first frame of video. probably not working well, when video has fade-in or something like that, but probably better than reading filestream and trying to search frames to show some preview.

or when you tried to use a preview of fileupload input type="file", then probably something like this will work

$(document).on("change", ".video-input", function(evt) {
  var $source = $('#video_source');
  $source[0].src = URL.createObjectURL(this.files[0]);

preview template will be

<video width="400" controls>
  <source src="mov_bbb.mp4" id="video_source">
    Your browser does not support HTML5 video.
<input type="file" name="file[]" class="video-input" accept="video/*">

Hey @snipi, check out the latest version. We added something similar to this to the mediafinder form widget:

<video data-thumb-url preload="metadata" data-document-type="video"></video>
<audio data-thumb-url controls preload="metadata" data-document-type="audio"></audio>

We hide the controls on the video since it has an image, but audio keeps the controls to display something… We may need to improve to later to include a custom UI.

1 Like

Can we get something like that for the fileupload widget? as shown in the thread-starters screenshot?

Do you mean something like mode: video or mode: audio for fileupload?

It would be great, when you upload a video and see a blank canvas, it’s frustrating

Instead of mode:video or mode:audio, I would prefer mime type detection because you can have some use cases where you enable both image and video, the thumbnail should works for that cases too