Poster Images

subscribe

Adding a poster should be fairly simple. Just need to update to add the poster attribute like:

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">

One option to add poster image support would be to create a MediaElement Poster format to the Image field.

subscribe

hello mfer,

could you elaborate how to add poster image in manage display instead of inline? Also is this possible to retrieve thumbnail created by other module after transcoding?

subscribe

Until the module provides UI for settings poster for the field, the simplest way is to use field preprocessing.

//in custom mediaelementposter.module file

//Assuming the following fields on node: field_video_url (type=link), field_poster_file (type=file)
//and image style named as 'video_poster'
 
//hook_preprocess_HOOK()
function mediaelementposter_preprocess_field(&$variables, $hook) {
  if ($variables['element']['#field_name'] == 'field_video_url' && !empty($variables['element']['#object']->field_poster_file[$variables['element']['#language']])) {
    $file_uri = $variables['element']['#object']->field_poster_file[$variables['element']['#language']][0]['uri'];
    $image_url = image_style_url('video_poster', $file_uri);
    $variables['items'][0]['#attributes']['poster'] = $image_url;
  }
}

I'm working with the Media module (and File Entity), here is a summary of what I do in a custom module (see https://gist.github.com/pbuyle/1501391):

• Override the File formatter (not field formatter) provided by the File Entity module (part of Media) to
  • Complete the form elements from mediaelement_field_formatter_settings_form to add a 'poster' field to allow selection of the field to use as source for the poster frame. Candidates fields are either File fields, Image fields Media fields or a specific custom-type 'Video Poster' fields.
  • Complete the element from mediaelement_field_formatter_view to add a poster attribute. The value of this attribute is derived from the selected 'poster' field in the settings.
• Media makes the File entities fieldable and provides an UI to edit the fields of a File entity. The 'Video Poster' field allo selection of three 'poster mode': random extracted frame, selected extracted frame or an existing media.
• I use ffmpeg-php to extract the frame(s) from the video as unmanaged JPG file.
• A file formatter to display the poster frame (as configured by a 'Poster Frame' field), with a Image Style applied, is also provided.

I don't think all of this should be provided by the MediaElement module itself but rather by additional modules. MediaElement should somehow allow easy alteration of the produced <video> and <audio>. An additional module, or MediaElement itself, could then provide the poster settings in the formatter and addition of the poster attribute. This module should provide an extension point (hook, plugin or whatever) to allow additional module to provide a poster frame. And finally,several poster frame provider modules could be implemented to use data from the video file entity's fields, fields from related entities, etc.

Any chance you code post the code to use for the custom module you wrote?

subscribe

suscribing

Subscribing +1

..but as I am using this with the Media module, is this an issue for this module or the Media Module, or both?

Solution as in #8 works, thank you for the clue.

But if field is output via Views module, what hook to use instead?

I have created a module MediaElement Poster in my sandbox, using the code from TomiMikola in #8 above.
It works fine for me. Give it a try and post any issues into the issue queue. If there is enough interest, and this feature is not going to be included in MediaElement then I will promote it to a full module.

The MediaElement Poster module has been updated with new features: MediaElement Poster.

I wanted to just share a patch for anyone using the MediaElement Poster to generate a poster image for the video.

The following patch will display a loading.gif image while the poster is loading and hides the playback overlay until the poster image is fully loaded, then fades them both in. I found that using the MediaElement Poster module with external (large) img files that were scaled to fit the player dimensions, looked pretty ugly on the page load. This is purely an aesthetic patch to make the player look nicer on page load.

I would create a new issue but since poster images are not supported yet by this module, this seemed like the most logical place to put this.

Patched against 7.x-1.x MediaElement

I forget to publish a link to the code mentioned in my comment in #9 if anyone is interested.
https://gist.github.com/pbuyle/1501391

@mongolito404 I'm trying to test your module, but am having a hard time figuring out what to do after enabling it (for anyone else trying to do the same, the provided module files are missing a .info file, which you need to create manually) .

What settings do I have to use, and where are they? Do I need to add a new field to my "video" content type? Does that field need to have a specific name? If I have already uploaded videos before enabling your module, will the thumbnails be automatically created for them?

Thanks for sharing your module, and sorry for all the questions!

@andrewfn I've installed your module and it seems to be working pretty good out of the box. Just needs those administration options you mentioned in the README. Just what I was looking for. Thanks!

Glad you found it useful.
Right now I don't have time to add the admin options, but maybe one day...

@pbuyle re code #9, I know this is a while ago, but are there specific fields we have setup in our content type to utilize?

If I remember correctly, you need to add a 'Video Thumbnail Settings' to your Video file type. And use to 'Video Thumbnail' formatter to displau the file.

If you are not interested by the feature to allow editor to select the poster frame, have a look at https://www.drupal.org/project/ffmpeg_video_thumbnail.