1

I am using a file field and media module in a custom content type to upload video files. The videos play fine. The preview image for each video is a gray box. How can I display a preview image or thumbnail for each video in place of the gray box in the node display?

Update: the preview image does not have to be auto-generated from the video; I would be OK with adding an field for an image to upload along with the video.

4
  • If you want a dynamic thumbnail generated from your uploaded video, it's quite complicated. We have to do this manually and it is almost +- 500 lines of code with file formatter, ffmpeg extension and custom functions.
    – Djouuuuh
    Sep 26, 2014 at 14:28
  • Do you already have the thumbnails for the videos or are you not sure on how to generate them?
    – CR47
    Sep 26, 2014 at 14:41
  • Generating and displaying them would be nice. But I would also go for snagging a frame outside of Drupal and just getting the display part working.
    – mastoll
    Sep 26, 2014 at 14:47
  • @mastoll the method I described should work for the latter. For Generating them you need do use the ffmpeg plugin, which requires a lot more work.
    – CR47
    Oct 9, 2014 at 12:51

2 Answers 2

1

Go to your content type >> MANAGE DISPLAY settings and set FORMAT as Rendered file and view mode: perview

enter image description here

1
  • This did not work for me. It displayed a film strip icon with no player controls. The default view mode, on the other hand does work. Preview now showing.
    – mastoll
    Sep 26, 2014 at 15:30
1

This depends on how you are displaying the video. From your question I gather that it's from the node view. The first comment from Djouuuuh is correct, but this is very time consuming and understandably may not be an option for you. So I'll tell you how you can make it work in a smaller time frame with some templating.

First you need to make sure the video field and the thumbnail for the video are available to the display. If you have a thumbnail field that gets populated automatically or uploaded to manually then all you have to do is add that to the display.

Go to admin/structure/types/type/manage/display and make sure the display you are trying to edit has both fields. If your thumbnail field is on the video entity then all you would need is the video field. Also, install and enable the devel module so you can test your displays.

In your node--type.tpl.php template you would need to first test that you have the data available to you, so write at the top of the document, flush cache, flush browser cache, and reload the node page. Click through the message printed at the top to make sure you have the data you need.

If the data is there, then you can start doing some templating to get the node to look how you want with the preview. One quick solution I can think of is to utilize HTML5's tag with the placeholder attribute.

Something like this:

<?php
  if (isset($content['video_field'])) { $video = $content['video_field']['und'][0]['link_to_video_file']; }
  if (isset($content['video_field']['und'][0]['thumbnail']['link_to_thumbnail_file'])) { $thumbnail = $content$content['video_field']['und'][0]['thumbnail']['link_to_thumbnail_file']; }
?>
<div class="video-wrapper">
  <video src="<?php if (isset($video)) { print $video; } ?>" poster="<?php if(isset($thumbnail)) { print $thumbnail; }?>"></video>
</div>

There are other attributes in addition to poster you can use with the tag to embed controls, timers, multiple video file type sources, etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.