Controlbar Video Previewer For JWPlayer 7 Adds video thumbnail previews to the JWPlayer 7 Controlbar

This example displays the use of the feature by first loading a pre-generated flat tiled image given with the video frame size.

This example demonstrates using the javascript based plugin for the Html5 player or Flash fallback functionality.

For the contactsheets mode, due to some problems with player css interfering with the thumbnails container the thumbnail container size is required to be configured instead of in css.

Since JWPlayer 7 the Flash fallback has no UI therefore the Javascript plugin handles display for both the Html5 and Flash modes.

Introduction



The Controlbar Video Previewer enables video thumbnail previews to be easily added to the controls while seeking.

This feature uses a generated set of video frames in a video contactsheet to enable fast access to the frames while seeking and mousing over the controlbar instead of waiting for the preview which is slow.

A custom tooltip is created which like the original controlbar tooltip can be easily customised and styled.

If contact sheet generation is not possible with your platform dynamic loading of thumbnails is possible. (contactsheets are desireable for faster loading)

JWPlayer 7 integrates thumbnails inside their scrubber tooltips natively however this requires a complicated SRT feed setup. With the contact sheet setup the coordinates are required to be configured on the same filename at particular times also configured in SRT format.

This plugin is generated all dynamically driven by some config settings used when creating the images.

The plugin now integrates thumbnails back into the original time tooltip which can be styled using css.

Features

  • Fast access to video previews without waiting to seek video frames or loading individual images which creates delays.
  • Interacts with the controls plugin independantly as a seperate plugin therefore will work with customised control plugins.
  • Customisable and styleable tooltip.
  • Ability to use the thumbnails generated from video frames instead of contactsheets.
  • Dynaically driven no SRT closed caption files are required to be configured.
  • Displays the thumbnails in the original player time tooltip.

Known Issues

  • The JWPlayer 7 Javascript api is disabled on IOS therefore the Html5 javascript plugin will not be enabled.

(Current Version 4.0.0)

Compatibility

  • JW Player 7 and above

Plugin Available For Purchase via Paypal


License Options
Domain(s)

(Version 4.0.0)

License Information

The Controlbar Video Previewer plugin is a once off commercial license with updates and support to the Controlbar Video Previewer plugin only. JW Player related questions and support may be provided on their forums at http://www.longtailvideo.com/support/forums/jw-player/

  • Single Domain License - Suitable for small sites with updates and unlimited support included.
  • Multi Domain License - Suitable for larger sites and video platform sites with updates, feature requests and unlimited priority support included.
  • Single Domain Not For Profit License - Suitable for not for profit organisations.

Note:

With your purchase please provide your domains to be provided with your licensed plugin. New domains need to be requested manually for the moment.

Refund Policy:

Please try the demo before purchase or request for a 60 day site demo. Refunds will not be issued unless under some circumstances sorry for the inconvenience.

Demo

Contact for a site or local demo download.

Examples

Basic example using the feature.

JW Player configuration

The clip object sets the YouTube plugin to be the video's streaming provider and URL resolver:




(function(jwplayer) {

    jwplayer("player").setup({
        flashplayer: "@PLAYER_SWF@",
        width: 660,
        height: 350,
        playlist: [
                                {
                                    sources: [
                                        { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                                        { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                                        { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                                        { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"}
                                    ],
                                    streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                    "previewer.file": "images/contactsheets/big_buck_bunny_400k-[index].jpg"
                                },
                                {
                                    sources: [
                                        { type: "webm", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.webm"},
                                        { type: "mp4", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.mp4"},
                                        { type: "ogg", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.ogv"},
                                        { type: "rtmp", file: "mp4:bitrate/elephants_dream_600k.mp4"}
                                    ],
                                    streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                    "previewer.file": "images/contactsheets/Elephants_Dream_720-h264-st-aac-[index].jpg"
                                }
        ],
        plugins: {
            "https://static.electroteque.org/js/jw7/videopreviewer-4.0.0.js": {
                frameWidth: 108,
                frameHeight: 60,
                columns: 5,
                rows: 5,
                interval: 10
            },
        }
    });

})(window.jwplayer);

Video Thumbnails Configuration

Video Frame Configuration

To configure each clip in a playlist with their own contact sheet or thumbnails url use a custom clip property `previewer.file` with a [index] format postfix to use to format the required index to load.


                 {
                                                    sources: [
                                                        { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                                                        { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                                                        { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                                                        { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"}
                                                    ],
                                                    streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                                    "previewer.file": "images/contactsheets/big_buck_bunny_400k-[index].jpg"
                                                },

Video Frame Options

property / datatype default description
columns
string
The number of configured columns in the contact sheet images.
rows
string
The number of configured rows in the contact sheet images.
interval
string
The value of the configured frame capture interval used. ie a 1/10th capture value will be 10.
totalFrames
string
The number of total frames captured. If not set, this is determined by the duration and the capture interval.
thumbnails
boolean
false Set the plugin to use the video thumbnails loader instead of using contactsheets. Filenames must be indexed like -1.jpg, -2.jpg etc with no zero padding.

Video Thumbnails Example

This example demonstrates using individual video thumbnails instead of flat contactsheets where generating them is not possible. Loading times may vary.



(function(jwplayer) {

    jwplayer("thumbnails").setup({
            flashplayer: "@PLAYER_SWF@",
            width: 660,
            height: 350,
            playlist: [
                                            {
                                                sources: [
                                                    { type: "webm", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.webm"},
                                                    { type: "mp4", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.mp4"},
                                                    { type: "ogg", file: "//videos.electroteque.org/bitrate/big_buck_bunny_600k.ogv"},
                                                    { type: "rtmp", file: "mp4:bitrate/big_buck_bunny_600k.mp4"},
                                                ],
                                                streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                                 "previewer.file": "images/thumbnails/bbb/big_buck_bunny_400k-[index].jpeg"
                                            },
                                            {
                                                sources: [
                                                    { type: "webm", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.webm"},
                                                    { type: "mp4", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.mp4"},
                                                    { type: "ogg", file: "//videos.electroteque.org/bitrate/elephants_dream_600k.ogv"},
                                                    { type: "rtmp", file: "mp4:bitrate/elephants_dream_600k.mp4"}
                                                ],
                                                streamer: "rtmp://rtmp.electroteque.org/cfx/st",
                                                "previewer.file": "images/thumbnails/ed/Elephants_Dream_720-h264-st-aac-[index].jpeg"
                                            }
            ],
            plugins: {
                "https://static.electroteque.org/js/jw7/videopreviewer-4.0.0.js": {
                    "frameWidth": "108",
                    "frameHeight": "60",
                    "interval": "20",
                    "thumbnails": "true",

                }
            }
    });

})(window.jwplayer);

Creating Your Own Video Contact Sheets and Video Thumbnails

To produce your own video contact sheets the following suggested tools are required although other tools could be used

  • Ffmpeg Encoder - http://ffmpeg.org/
  • Imagemagick Montage - http://www.imagemagick.org
    • A helper Python scripts is supplied for generating these commands easily.

      Example Ffmpeg command for generating thumbnails with a frame rate interval:

      FFmpeg generates an extra duplicated frame at the start where it finds a keyframe, however by changing the vsync flag and using filters this works around the issue. For already created thumbnails and contactsheets this causes an indexing issue therefore the thumbnailsOffset property is required.

      
      fmpeg -y -threads 8  -i /path/to/source.mp4 -f image2 -vsync cfr  -an -sn -vf scale=108:60,fps=fps=1/10 -b:v 2000 -bt 20M /path/to/dst/output-%03d.jpeg
      
      

      Example Ffmpeg command for generating thumbnails with a set number of frames:

      
      ## get this info from ffprobe
      FRAMES=(duration/num_frames * fps)
      fmpeg -y -threads 8  -i /path/to/source.mp4 -f image2 -vsync cfr  -an -sn -vf scale=108:60,framestep=$FRAMES -b:v 2000 -bt 20M /path/to/dst/output-%03d.jpeg
      
      

      Example command for generating contactsheets with a frame rate with the helper script:

      
      ./make_thumbnails.py -i src/big_buck_bunny_400k.mp4 -r "1/10" -W 108 -H 60 -o out -f big_buck_bunny_400k -C 5 -R 5
      

      Example command for generating contactsheets with a set number of frames with the helper script:

      
      ./make_thumbnails.py -i src/big_buck_bunny_400k.mp4 -n 60 -W 108 -H 60 -o out -f big_buck_bunny_400k -C 5 -R 5
      

      Example command for preparing thumbnails only with the helper script:

      
      ./make_thumbnails.py -i src/big_buck_bunny_400k.mp4 -r "1/10" -W 108 -H 60 -o out -O bbb -f big_buck_bunny_400k -t
      

      Command arguments:

      • i - the source file.
      • r - the frame rate interval.
      • W - the frame width.
      • H - the frame height.
      • o - the destination directory where to save the temp files and contactsheets.
      • O - when generating for thumbnails only the destination directory name to place the thumbnails.
      • f - the filename prefix for the contactsheets and thumbnails.
      • n - require a set number of frames instead of variable number of frames when using the frame rate.
      • C - The number of tile columns for the contactsheets.
      • R - The number of tile rows for the contactsheets.
      • t - if generating thumbnails instead of contact sheets.
      • q - the quality for the contactsheets 0-100.

      If using an encoding api service like encoding.com or zencoder follow their instructions to request the thumbnail generation with a set frame interval.

      • Encoding.com - http://www.encoding.com/api/category/category/complete_api_documentation#thumbnail_features/
      • Zencoder - https://app.zencoder.com/docs/api/encoding/thumbnails
        • Once the thumbnails are generated using a tool such as Imagemagick montage can be used to produce the video contactsheets.

          By setting a set column and row count ie "-tile 5x5" and an image destination index postfix with `%d`, this will enable montage to produce many contactsheets of a set size which allows for faster load times.

          The tiled images need to be as close together as possible without any gaps to allow for the feature to work correctly, this can be achieved with the option "-geometry +0+0"

          Example montage command:

          
          montage /path/to/thumbnails/*.jpeg -scenes 1 -background black -quality 60 -geometry +0+0 -tile 5x5 output-%d.jpg
          

          Supplied with the download is a helper Python script to generate the video frame thumbnails and the contact sheets.