How can produce poster images for the video player before playing the actual video?

Comments

miller.t.chris@gmail.com’s picture

So far so good as a standalone video player, but this is a very important feature. This video player needs to have thumbnail creation & FFMPEG transcode options to blossom in the Drupal 7 community.

I will contribute in anyway that I can...but there is currently no dev up on the page and no response to this post in 4 days.

Please let us know what's going on with this module as it seems to be a promising module!

ts145nera’s picture

subscribe

mfer’s picture

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">
silverflame757’s picture

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

jaiiali’s picture

subscribe

robotcake’s picture

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?

Tsubo’s picture

subscribe

TomiMikola’s picture

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;
  }
}
pbuyle’s picture

Version: 7.x-1.x-dev » 7.x-1.0
Component: Code » User interface
Status: Needs review » Active

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.

svenarajala’s picture

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

VonZesen’s picture

subscribe

rwt’s picture

suscribing

reubenavery’s picture

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?

Dave Reid’s picture

Version: 7.x-1.0 » 7.x-1.x-dev
Component: User interface » Code
nicolant’s picture

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

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

andrewfn’s picture

Status: Active » Needs review

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.

andrewfn’s picture

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

blasthaus’s picture

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

pbuyle’s picture

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

sja1’s picture

@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!

krisrobinson’s picture

@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!

andrewfn’s picture

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

Status: Active » Needs review
David Dubya’s picture

Issue summary: View changes

@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?

pbuyle’s picture

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.