Cacher is the code snippet organizer for pro developers

#!/bin/bash
# Bash script that generates film strip video preview using ffmpeg
# You can see live demo: http://jsfiddle.net/r6wz0nz6/2/
# Tutorial on Binpress.com: http://www.binpress.com/tutorial/generating-nice-movie-previews-with-ffmpeg/138

if [ -z "$1" ]; then
    echo "usage: ./movie_preview.sh VIDEO [HEIGHT=120] [COLS=100] [ROWS=1] [OUTPUT]"
    exit
fi

MOVIE=$1
# get video name without the path and extension
MOVIE_NAME=`basename $MOVIE`
OUT_DIR=`pwd`

HEIGHT=$2
COLS=$3
ROWS=$4
OUT_FILENAME=$5

if [ -z "$HEIGHT" ]; then
    HEIGHT=120
fi
if [ -z "$COLS" ]; then
    COLS=100
fi
if [ -z "$ROWS" ]; then
    ROWS=1
fi
if [ -z "$OUT_FILENAME" ]; then
    OUT_FILENAME=`echo ${MOVIE_NAME%.*}_preview.jpg`
fi

OUT_FILEPATH=`echo $OUT_DIR/$OUT_FILENAME`

TOTAL_IMAGES=`echo "$COLS*$ROWS" | bc`

# get total number of frames in the video
# ffprobe is fast but not 100% reliable. It might not detect number of frames correctly!
NB_FRAMES=`ffprobe -show_streams "$MOVIE" 2> /dev/null | grep nb_frames | head -n1 | sed 's/.*=//'`
# `-show-streams` Show all streams found in the video. Each video has usualy two streams (video and audio).
# `head -n1` We care only about the video stream which comes first.
# `sed 's/.*=//'` Grab everything after `=`.

if [ "$NB_FRAMES" = "N/A" ]; then
    # as a fallback we'll use ffmpeg. This command basically copies this video to /dev/null and it counts
    # frames in the process. It's slower (few seconds usually) than ffprobe but works everytime.
    NB_FRAMES=`ffmpeg -nostats -i "$MOVIE" -vcodec copy -f rawvideo -y /dev/null 2>&1 | grep frame | awk '{split($0,a,"fps")}END{print a[1]}' | sed 's/.*= *//'`
    # I know, that `awk` and `sed` parts look crazy but it has to be like this because ffmpeg can
    # `-nostats` By default, `ffmpeg` prints progress information but that would be immediately caught by `grep`
    #     because it would contain word `frame` and therefore output of this entire command would be totally
    #      random. `-nostats` forces `ffmpeg` to print just the final result.
    # `-i "$MOVIE"` Input file
    # `-vcodec copy -f rawvideo` We don't want to do any reformating. Force `ffmpeg` to read and write the video as is.
    # `-y /dev/null` Dump read video data. We just want it to count frames we don't care about the data.
    # `awk ...` The line we're interested in has format might look like `frame= 42` or `frame=325`. Because of that
    #     extra space we can't just use `awk` to print the first column and we have to cut everything from the
    #     beggining of the line to the term `fps` (eg. `frame= 152`).
    # `sed ...` Grab everything after `=` and ignore any spaces
fi

# calculate offset between two screenshots, drop the floating point part
NTH_FRAME=`echo "$NB_FRAMES/$TOTAL_IMAGES" | bc`
echo "capture every ${NTH_FRAME}th frame out of $NB_FRAMES frames"

# make sure output dir exists
mkdir -p $OUT_DIR

FFMPEG_CMD="ffmpeg -loglevel panic -i \"$MOVIE\" -y -frames 1 -q:v 1 -vf \"select=not(mod(n\,$NTH_FRAME)),scale=-1:${HEIGHT},tile=${COLS}x${ROWS}\" \"$OUT_FILEPATH\""
# `-loglevel panic` We don’t want to see any output. You can remove this option if you’re having any problem to see what went wrong
# `-i "$MOVIE"` Input file
# `-y` Override any existing output file
# `-frames 1` Tell `ffmpeg` that output from this command is just a single image (one frame).
# `-q:v 3` Output quality where `0` is the best.
# `-vf \"select=` That's where all the magic happens. Selector function for [video filter](https://trac.ffmpeg.org/wiki/FilteringGuide).
# # `not(mod(n\,58))` Select one frame every `58` frames [see the documentation](https://www.ffmpeg.org/ffmpeg-filters.html#Examples-34).
# # `scale=-1:120` Resize to fit `120px` height, width is adjusted automatically to keep correct aspect ration.
# # `tile=${COLS}x${ROWS}` Layout captured frames into this grid

# print enire command for debugging purposes
# echo $FFMPEG_CMD

echo $OUT_FILEPATH

eval $FFMPEG_CMD

<!--
Tutorial code for: http://www.binpress.com/tutorial/generating-nice-movie-previews-with-ffmpeg/138
-->
<!DOCTYPE html>
<html lang="en">
<head>
     <title></title>
</head>
<body>
    <a href="https://www.youtube.com/watch?v=v1uyQZNg2vE" target="_blank" class="video-preview" data-frames="100" data-source="http://i.imgur.com/BX0pV4J.jpg"></a>

    <style>
    body {
        text-align: center;
        padding-top: 20px;
    }
    body > div {/*
        display: inline-block;*/
    }

    .video-preview {
        display: inline-block;
        position: relative;
        background: #ddd;
        overflow: hidden;
        /* This is temporary width and height, these'll be overriden when the source img is loaded. */
        /* If you already know size of a preview frame you can hardcode it here. */
        width: 160px;
        height: 120px;
        border-radius: 3px;
        box-shadow: 0 0 6px #bbb;
    }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    (function($) {
        $.fn.videoPreview = function(options) {
            return this.each(function() {
                var elm = $(this);
                var frames = parseFloat(elm.data('frames'));

                var img = $('<img/>', { 'src': elm.data('source') }).hide().css({
                    'position': 'absolute',
                    'cursor': 'pointer'
                }).appendTo(elm);
                var slider = $('<div/>').hide().css({
                    'width': '2px',
                    'height': '100%',
                    'background': '#ddd',
                    'position': 'absolute',
                    'z-index': '1',
                    'top': '0',
                    'opacity': 0.6,
                    'cursor': 'pointer'
                }).appendTo(elm);

                var width;

                function defaultPos() {
                    img.css('left', -width * frames / 4);
                }

                img.load(function() {
                    $(this).show();
                    width = this.width / frames;
                    elm.css('width', width);
                    defaultPos();
                });
                elm.mousemove(function(e) {
                    var left = e.clientX - elm.position().left;
                    slider.show().css('left', left - 1); // -1 because it's 2px width
                    img.css('left', -Math.floor((left / width) * frames) * width);
                }).mouseout(function(e) {
                    slider.hide();
                    defaultPos();
                });

            });
        };
    })(jQuery);

    $('.video-preview').videoPreview();
    </script>
</body>
</html>