Display video preview with fileupload widget

Known Issues
#1

Hello,

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.

image

Best regards,

2 Likes
#2

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

#3

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">
</video>

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]);
  $source.parent()[0].load();
});

preview template will be

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

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
#5

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

#6

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

#7

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