Skip to content

Instantly share code, notes, and snippets.

@Chaz6

Chaz6/thumbnail-videos-as-webpage.bash

Last active January 25, 2019 19:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Chaz6/8f91016f615d42d5b52a75dc0bbd8e05 to your computer and use it in GitHub Desktop.
Save Chaz6/8f91016f615d42d5b52a75dc0bbd8e05 to your computer and use it in GitHub Desktop.
Download ZIP
Generate a thumbnail web page for a folder of videos
Raw
thumbnail-videos-as-webpage.bash
#!/bin/bash
SIZE=400
cat >index.html<<EOF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thumbnail gallery</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<style type="text/css">.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1.5rem;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@10.19.0/dist/lazyload.min.js"></script>
</head>
<body class="bg-indigo-lightest font-sans">
<div class="grid max-w-4xl mx-auto p-8">
EOF
find -maxdepth 1 \( -name '*.mpg' -o -iname '*.avi' -o -iname '*.webm' -o -iname '*.wmv' -o -iname '*.mov' -o -iname '*.mp4' -o -iname '*.flv' -o -iname '*.mkv' \) -type f -printf '%P\0' | sort -z | while read -d $'\0' filename
do
i="${filename//\&/&amp;}"
j="${i}"
i="${i//\#/%23}"
echo "${filename}"
if [ ! -f "${filename}".jpg ]
then
duration=$(ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 "${filename}")
ffmpeg -loglevel panic -ss "$(echo "$duration"/10 | bc)" -i "${filename}" -frames:v 1 -q:v 2 -vf "scale=${SIZE}:${SIZE}:force_original_aspect_ratio=increase,crop=${SIZE}:${SIZE}" "${filename}".jpg </dev/tty
fi
echo "<a href=\"${i}\" class=\"bg-white rounded h-full text-grey-darkest no-underline shadow-md\"><p class=\"text-base p-6\">${j}</p><img class=\"w-full block rounded-b lazy\" data-src=\"${i}.jpg\" alt=\"${i}\" height=\"${SIZE}\" width=\"${SIZE}\"></a>" >> index.html
done
cat>>index.html<<EOF
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@10.19.0/dist/lazyload.min.js"></script>
<script>
new LazyLoad()
</script>
</body>
</html>
EOF
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment