I love the simplicity of this player. Love it. Love it.

The only thing I can't figure out is how to get the poster images working.

Right now the videos look like this:

And the generated HTML looks like this:

<!-- Begin VideoJS -->
  <div class="video-js-box" id="videojs-5-field-html5-video">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video id="videojs-5-field-html5-video" class="video-js" width="640" height="264" controls="controls" preload="auto" poster="">
                              <source src="http://sandbox/sites/default/files/wsop-test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                  <source src="http://sandbox/sites/default/files/wsop-test.mp4" type='video/webm; codecs="vp8, vorbis"' />
                  <source src="http://sandbox/sites/default/files/wsop-test.mp4" type='video/ogg; codecs="theora, vorbis"' />
            <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <!-- @TODO: Add Flowplayer on SWFTools or Flowplayer API modules -->
  <!-- End VideoJS -->

Maybe I'm missing it.

#14 videojsposter404.jpg158.62 KBbradspry


heshanlk’s picture

Its not yet implemented, I will add support with poster image soon

mattman’s picture


I've added in poster support on my local version of your module. I took the easy way out and simply look for a filefield image named videojs_poster (which is, as you know, internally field_videojs_poster)

I simply take the first item off the filefield array and pass it through $vars. Here's the code I used.


  // Grab any poster image from a field named videojs_poster
  if (!empty($node->field_videojs_poster)) {
    $image = $node->field_videojs_poster[0]; // take the first image from videojs_poster field
    $vars['poster'] = file_create_url($image['filepath']);

Then within videojs.tpl.php

    <video id="<?php print $player_id; ?>" class="video-js" width="<?php print(variable_get('videojs_width', 640))?>" height="<?php print(variable_get('videojs_height', 264))?>" controls="controls" preload="auto" poster="<?php print $poster; ?>">

As a start, this is the easiest way to get support for poster frames. Just put this in your docs and you're good to go without adding too much code or extra stuff to prefs, etc.

Hope this helps.

heshanlk’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

mohamadaliakbari’s picture

something link "manual upload thumbnail" option in video field in video module, is needed here.

Jorrit’s picture

You can add a preprocess function in your own theme to add a thumbnail entry to the items array.

bradspry’s picture

Version: 6.x-1.1 » 6.x-2.1

I'm also seeing the questionmark indicating a broken poster image, and the poster variable is poster="s"

<video id="videojs-483-field-video" class="video-js vjs-default-skin" poster="s" width="640" height="480" controls="controls" preload="auto" data-setup="{}">

Jorrit’s picture

You should have opened a new issue, because this one is closed.

It seems that you supply the thumbnail as a string. The module expects an array with file information, such as filepath, filemime, filename, etc. How are you invoking Video.js?

bradspry’s picture

Thank you for your reply. I am invoking it the normal way, with a content-type containing a video filefield.

Jorrit’s picture

What version of the video module are you using?

bradspry’s picture

@Jorrit Video 6.x-4.2

Jorrit’s picture

Have you considered upgrading to a more recent version?

bradspry’s picture

Thank you for your patience with me. I will update the Video module ASAP and report back.

bradspry’s picture

158.62 KB

Problem persists after updating video module to Video 6.x-5.1 and videojs module to 6.x-2.2.

Noted poster variable is now gone from video tag:

<video id="videojs-483-field-video" class="video-js vjs-default-skin" poster="s" width="640" height="480" controls="controls" preload="auto" data-setup="{}">

after update:
<video id="videojs-486-field-video_html5_api" class="vjs-tech" preload="auto" data-setup="{}" src="http://url_to_file">

Poster is now referred to as IMG tag:
<img class="vjs-poster" src="s" tabindex="-1">

You can see the src="s" instead of the url to the poster graphic.

Any ideas? Thank you ahead of time.

Jorrit’s picture

I think it is a different problem because most code has changed since 2010. It would have been better if you opened a new ticket. What version of the Video.js module are you using?