changes buttons into div-rows

This commit is contained in:
Ashley Blewer 2017-10-17 21:03:04 -04:00
parent 494993d4c2
commit c6a579a0bf
2 changed files with 161 additions and 177 deletions

View File

@ -132,90 +132,77 @@ img {
margin-bottom: 18px;
}
div {
font-family: 'Merriweather', serif;
color: white;
}
button {
font: inherit;
font-family: inherit;
color: inherit;
}
.btn {
border: 1px solid transparent;
background-color: #424242;
font-size: 1em;
line-height: 1.5em;
white-space: normal;
cursor: pointer;
padding: 8px 12px;
border-radius: 4px;
padding-left: 2.5em;
margin: 8px;
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
.recipe {
color: white;
background-color: #383838;
padding: 14px;
padding-left: 2.8em;
font-family: "Montserrat";
font-weight: bold;
font-size: 1.2em;
border: 1px solid black;
transition: all .5s ease-out;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
width: 100%;
}
.btn:before {
.recipe:hover {
color: black;
background-color: #449d44;
border: 1px solid black;
}
.recipe:before {
content: "💫";
position: absolute;
left: 1em;
padding: 0 1px;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
padding-right: 1em;
}
.btn:hover:before, .btn:focus:before, .btn:active:before {
-webkit-transform: scale(1.3) translateZ(0);
transform: scale(1.3) translateZ(0);
}
.contents-list {
color: white;
border: 1px solid black;
background-color: #383838;
padding: 14px;
font-family: "Montserrat";
font-weight: bold;
font-size: 1em;
border:1px solid rgba(255, 255, 255, 0);
transition:all .5s ease-in-out;
.recipe:hover:before, .recipe:focus:before, .recipe:active:before {
transform: scale(1.3);
}
.sidebar a {
text-decoration: none;
}
.contents-list {
color: white;
background-color: #383838;
padding: 14px;
padding-left: 2.8em;
font-family: "Montserrat";
font-weight: bold;
font-size: 1em;
border: 1px solid black;
transition: all .5s ease-out;
}
.contents-list:hover {
color: black;
font-size: 1.05em;
background-color: #449d44;
border:1px solid black;
}
.contents-list:before {
content: "📼";
position: absolute;
left: 1em;
padding: 0 1px;
padding-right: 1em;
}
.contents-list:hover:before, .contents-list:focus:before, .contents-list:active:before {
transform: scale(1.8) translateX(0.3em);
}
.codeblock {
font-family: monospace
padding: 2px 4px;

View File

@ -68,9 +68,7 @@
<h2 id="basics">Learn about FFmpeg basics</h2>
<!-- Basic structure of an FFmpeg command -->
<span data-toggle="collapse" data-target="#basic-structure">
<button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Basic structure of an FFmpeg command">Basic structure of an FFmpeg command</button>
</span>
<div class="recipe" data-toggle="collapse" data-target="#basic-structure">Basic structure of an FFmpeg command</div>
<div id="basic-structure" class="collapse">
<h3>Basic structure of an FFmpeg command</h3>
<p class="link"></p>
@ -95,7 +93,7 @@
<h2 id="concepts">Learn about more advanced FFmpeg concepts</h2>
<!-- Filtergraph explanation -->
<span data-toggle="collapse" data-target="#filtergraphs"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Filtergraphs">Filtergraphs</button></span>
<div class="recipe" data-toggle="collapse" data-target="#filtergraphs">Filtergraphs</div>
<div id="filtergraphs" class="collapse">
<h3>Filtergraphs</h3>
<p class="link"></p>
@ -128,7 +126,7 @@
<h2 id="rewrap">Change container (rewrap)</h2>
<!-- Basic rewrap command -->
<span data-toggle="collapse" data-target="#basic-rewrap"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Basic rewrap command">Basic rewrap command</button></span>
<div class="recipe" data-toggle="collapse" data-target="#basic-rewrap">Basic rewrap command</div>
<div id="basic-rewrap" class="collapse">
<h3>Rewrap a file</h3>
<p class="link"></p>
@ -151,7 +149,7 @@
<!-- End Basic rewrap command -->
<!-- MKV to MP4 -->
<span data-toggle="collapse" data-target="#mkv_to_mp4"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Convert Matroska (MKV) to MP4">MKV to MP4</button></span>
<div class="recipe" data-toggle="collapse" data-target="#mkv_to_mp4">Convert Matroska (MKV) to MP4</div>
<div id="mkv_to_mp4" class="collapse">
<h3>MKV to MP4</h3>
<p class="link"></p>
@ -176,7 +174,7 @@
<h2 id="transcode">Change codec (transcode)</h2>
<!-- Transcode to ProRes -->
<span data-toggle="collapse" data-target="#to_prores"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode to deinterlaced Apple ProRes LT">Transcode to ProRes</button></span>
<div class="recipe" data-toggle="collapse" data-target="#to_prores">Transcode to deinterlaced Apple ProRes LT</div>
<div id="to_prores" class="collapse">
<h3>Transcode into a deinterlaced Apple ProRes LT</h3>
<p class="link"></p>
@ -207,7 +205,7 @@
<!-- ends Transcode to ProRes -->
<!-- Transcode to H.264 -->
<span data-toggle="collapse" data-target="#transcode_h264"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode to an H.264 access file">Transcode to H.264</button></span>
<div class="recipe" data-toggle="collapse" data-target="#transcode_h264">Transcode to an H.264 access file</div>
<div id="transcode_h264" class="collapse">
<h3>Transcode to H.264</h3>
<p class="link"></p>
@ -234,7 +232,7 @@
<!-- ends Transcode to H.264 -->
<!-- H.264 from DCP -->
<span data-toggle="collapse" data-target="#dcp_to_h264"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode from DCP to an H.264 access file">H.264 from DCP</button></span>
<div class="recipe" data-toggle="collapse" data-target="#dcp_to_h264">Transcode from DCP to an H.264 access file</div>
<div id="dcp_to_h264" class="collapse">
<h3>H.264 from DCP</h3>
<p class="link"></p>
@ -260,7 +258,7 @@
<!-- ends H.264 from DCP -->
<!-- Transcode to FFV1.mkv -->
<span data-toggle="collapse" data-target="#create_FFV1_mkv"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode your file with the FFV1 Version 3 Codec in a Matroska container">Create FFV1.mkv</button></span>
<div class="recipe" data-toggle="collapse" data-target="#create_FFV1_mkv">Transcode your file with the FFV1 Version 3 Codec in a Matroska container</div>
<div id="create_FFV1_mkv" class="collapse">
<h3>Create FFV1 Version 3 video in a Matroska container with framemd5 of input</h3>
<p class="link"></p>
@ -286,7 +284,7 @@
<!-- ends Transcode to FFV1.mkv-->
<!-- Rip DVD -->
<span data-toggle="collapse" data-target="#dvd_to_file"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Basic DVD to file conversion">Convert DVD to H.264</button></span>
<div class="recipe" data-toggle="collapse" data-target="#dvd_to_file">Convert DVD to H.264</div>
<div id="dvd_to_file" class="collapse">
<h3>Convert DVD to H.264</h3>
<p class="link"></p>
@ -318,7 +316,7 @@
<!-- ends rip DVD -->
<!-- Transcode to H.265 -->
<span data-toggle="collapse" data-target="#transcode_h265"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode to an H.265/HEVC MP4">Transcode to H.265/HEVC</button></span>
<div class="recipe" data-toggle="collapse" data-target="#transcode_h265">Transcode to an H.265/HEVC MP4</div>
<div id="transcode_h265" class="collapse">
<h3>Transcode to H.265/HEVC</h3>
<p class="link"></p>
@ -348,7 +346,7 @@
<!-- Here comes audio-only transcoding -->
<!-- WAV to MP3 -->
<span data-toggle="collapse" data-target="#wav_to_mp3"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Convert WAV to MP3">WAV to MP3</button></span>
<div class="recipe" data-toggle="collapse" data-target="#wav_to_mp3">Convert WAV to MP3</div>
<div id="wav_to_mp3" class="collapse">
<h3>WAV to MP3</h3>
<p class="link"></p>
@ -373,7 +371,7 @@
<!-- ends WAV to MP3 -->
<!-- append notice to access mp3 -->
<span data-toggle="collapse" data-target="#append_mp3"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Generate two access MP3s from input. One with added audio (such as a copyright notice) and one unmodified.">Create access MP3</button></span>
<div class="recipe" data-toggle="collapse" data-target="#append_mp3">Generate two access MP3s (with and without copyright).</div>
<div id="append_mp3" class="collapse">
<h3>Generate two access MP3s from input. One with appended audio (such as a copyright notice) and one unmodified.</h3>
<p class="link"></p>
@ -398,7 +396,7 @@
<!-- ends append notice to access mp3 -->
<!-- WAV to AAC/MP4 -->
<span data-toggle="collapse" data-target="#wav_to_mp4"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Convert WAV to AAC/MP4">WAV to AAC/MP4</button></span>
<div class="recipe" data-toggle="collapse" data-target="#wav_to_mp4">Convert WAV to AAC/MP4</div>
<div id="wav_to_mp4" class="collapse">
<h3>WAV to AAC/MP4</h3>
<p class="link"></p>
@ -422,7 +420,7 @@
<h2 id="video-properties">Change video properties</h2>
<!-- 4:3 to 16:9 -->
<span data-toggle="collapse" data-target="#SD_HD"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transform 4:3 aspect ratio into 16:9 with pillarbox">4:3 to 16:9</button></span>
<div class="recipe" data-toggle="collapse" data-target="#SD_HD">Transform 4:3 aspect ratio into 16:9 with pillarbox</div>
<div id="SD_HD" class="collapse">
<h3>Transform 4:3 aspect ratio into 16:9 with pillarbox</h3>
<p class="link"></p>
@ -440,7 +438,7 @@
<!-- ends 4:3 to 16:9 -->
<!-- 16:9 to 4:3 -->
<span data-toggle="collapse" data-target="#HD_SD"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transform 16:9 aspect ratio video into 4:3 with letterbox">16:9 to 4:3</button></span>
<div class="recipe" data-toggle="collapse" data-target="#HD_SD">Transform 16:9 aspect ratio video into 4:3 with letterbox</div>
<div id="HD_SD" class="collapse">
<h3>Transform 16:9 aspect ratio video into 4:3 with letterbox</h3>
<p class="link"></p>
@ -459,7 +457,7 @@
<!-- ends 16:9 to 4:3 -->
<!-- SD to HD -->
<span data-toggle="collapse" data-target="#SD_HD_2"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transform SD to HD with pillarbox">SD to HD</button></span>
<div class="recipe" data-toggle="collapse" data-target="#SD_HD_2">Transform SD to HD with pillarbox</div>
<div id="SD_HD_2" class="collapse">
<h3>Transform SD into HD with pillarbox</h3>
<p class="link"></p>
@ -482,7 +480,7 @@
<!-- ends SD to HD -->
<!-- Change display aspect ratio without re-encoding video-->
<span data-toggle="collapse" data-target="#change_DAR"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Change display aspect ratio without re-encoding">Change Display Aspect Ratio</button></span>
<div class="recipe" data-toggle="collapse" data-target="#change_DAR">Change display aspect ratio without re-encoding</div>
<div id="change_DAR" class="collapse">
<h3>Change Display Aspect Ratio without reencoding video</h3>
<p class="link"></p>
@ -498,7 +496,7 @@
<!-- ends Change display aspect ratio without re-encoding video -->
<!-- Convert colourspace -->
<span data-toggle="collapse" data-target="#convert-colourspace"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Convert colourspace of video">Convert colourspace</button></span>
<div class="recipe" data-toggle="collapse" data-target="#convert-colourspace">Convert colourspace of video</div>
<div id="convert-colourspace" class="collapse">
<h3>Transcode video to a different colourspace</h3>
<p class="link"></p>
@ -549,9 +547,8 @@
</div>
<!-- ends Convert colourspace -->
<!-- Modify speed -->
<span data-toggle="collapse" data-target="#modify_speed"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Modify image and sound speed">Modify speed</button></span>
<div class="recipe" data-toggle="collapse" data-target="#modify_speed">Modify image and sound speed</div>
<div id="modify_speed" class="collapse">
<h3>Modify image and sound speed</h3>
<p class="link"></p>
@ -574,7 +571,7 @@
<!-- ends Modify speed -->
<!-- Make stream properties explicate -->
<span data-toggle="collapse" data-target="#clarify_stream"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Clarify stream properties">Set stream properties</button></span>
<div class="recipe" data-toggle="collapse" data-target="#clarify_stream">Clarify stream properties</div>
<div id="clarify_stream" class="collapse">
<h3>Set stream properties</h3>
<p class="link"></p>
@ -614,7 +611,7 @@
<h2 id="audio-files">Change or view audio properties</h2>
<!-- Extract audio from an AV file -->
<span data-toggle="collapse" data-target="#extract_audio"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Extract audio without loss from an AV file">Extract audio</button></span>
<div class="recipe" data-toggle="collapse" data-target="#extract_audio">Extract audio without loss from an AV file</div>
<div id="extract_audio" class="collapse">
<h3>Extract audio from an AV file</h3>
<p class="link"></p>
@ -631,7 +628,7 @@
<!-- ends Extract audio from am AV file -->
<!-- Combine audio tracks -->
<span data-toggle="collapse" data-target="#combine_audio"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Combine audio tracks">Combine audio tracks</button></span>
<div class="recipe" data-toggle="collapse" data-target="#combine_audio">Combine audio tracks</div>
<div id="combine_audio" class="collapse">
<h3>Combine audio tracks into one in a video file</h3>
<p class="link"></p>
@ -654,7 +651,7 @@
<!-- ends Combine audio tracks -->
<!-- phase shift -->
<span data-toggle="collapse" data-target="#phase_shift"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Inverses the audio phase of the second channel">Flip phase shift</button></span>
<div class="recipe" data-toggle="collapse" data-target="#phase_shift">Inverses the audio phase of the second channel</div>
<div id="phase_shift" class="collapse">
<h3>Flip audio phase shift</h3>
<p class="link"></p>
@ -672,7 +669,7 @@
<!-- ends phase shift -->
<!-- loudnorm metadata -->
<span data-toggle="collapse" data-target="#loudnorm_metadata"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Calculate Loudness Levels">Calculate Loudness Levels</button></span>
<div class="recipe" data-toggle="collapse" data-target="#loudnorm_metadata">Calculate Loudness Levels</div>
<div id="loudnorm_metadata" class="collapse">
<h3>Calculate Loudness Levels</h3>
<p class="link"></p>
@ -691,7 +688,7 @@
<!-- ends loudnorm metadata -->
<!-- RIAA equalization -->
<span data-toggle="collapse" data-target="#riaa_eq"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="RIAA Equalization">RIAA Equalization</button></span>
<div class="recipe" data-toggle="collapse" data-target="#riaa_eq">RIAA Equalization</div>
<div id="riaa_eq" class="collapse">
<h3>RIAA Equalization</h3>
<p class="link"></p>
@ -707,7 +704,7 @@
<!-- ends RIAA equalization -->
<!-- one pass loudnorm -->
<span data-toggle="collapse" data-target="#loudnorm_one_pass"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="One Pass Loudness Normalization">One Pass Loudness Normalization</button></span>
<div class="recipe" data-toggle="collapse" data-target="#loudnorm_one_pass">One Pass Loudness Normalization</div>
<div id="loudnorm_one_pass" class="collapse">
<h3>One Pass Loudness Normalization</h3>
<p class="link"></p>
@ -726,7 +723,7 @@
<!-- ends one pass loudnorm -->
<!-- two pass loudnorm -->
<span data-toggle="collapse" data-target="#loudnorm_two_pass"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Two Pass Loudness Normalization">Two Pass Loudness Normalization</button></span>
<div class="recipe" data-toggle="collapse" data-target="#loudnorm_two_pass">Two Pass Loudness Normalization</div>
<div id="loudnorm_two_pass" class="collapse">
<h3>Two Pass Loudness Normalization</h3>
<p class="link"></p>
@ -751,7 +748,7 @@
<!-- ends two pass loudnorm -->
<!-- Fix A/V async 1 -->
<span data-toggle="collapse" data-target="#avsync_aresample"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Fix A/V sync issues by resampling audio">Fix AV Sync: Resample audio</button></span>
<div class="recipe" data-toggle="collapse" data-target="#avsync_aresample">Fix A/V sync issues by resampling audio</div>
<div id="avsync_aresample" class="collapse">
<h3>Fix AV Sync: Resample audio</h3>
<p class="link"></p>
@ -772,7 +769,7 @@
<h2 id="join-trim">Join, trim, or excerpt a video</h2>
<!-- Join files together -->
<span data-toggle="collapse" data-target="#join_files"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Join (concatenate) two or more files into a single file">Join files together</button></span>
<div class="recipe" data-toggle="collapse" data-target="#join_files">Join (concatenate) two or more files into a single file</div>
<div id="join_files" class="collapse">
<h3>Join files together</h3>
<p class="link"></p>
@ -798,7 +795,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Join files together -->
<!-- Split file into segments -->
<span data-toggle="collapse" data-target="#segment_file"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Split one file into several smaller segments">Split file into segments</button></span>
<div class="recipe" data-toggle="collapse" data-target="#segment_file">Split one file into several smaller segments</div>
<div id="segment_file" class="collapse">
<h3>Split file into segments</h3>
<p class="link"></p>
@ -828,7 +825,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Split file into segments -->
<!-- Trim -->
<span data-toggle="collapse" data-target="#trim"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Trim video">Trim video</button></span>
<div class="recipe" data-toggle="collapse" data-target="#trim">Trim video</div>
<div id="trim" class="collapse">
<h3>Trim a video without re-encoding</h3>
<p class="link"></p>
@ -854,7 +851,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Trim -->
<!-- Excerpt from beginning -->
<span data-toggle="collapse" data-target="#excerpt_from_start"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create an excerpt, starting from the beginning of the file">Excerpt from beginning</button></span>
<div class="recipe" data-toggle="collapse" data-target="#excerpt_from_start">Create an excerpt, starting from the beginning of the file</div>
<div id="excerpt_from_start" class="collapse">
<h3>Excerpt from beginning</h3>
<p class="link"></p>
@ -872,7 +869,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Excerpt from beginning -->
<!-- Excerpt to end -->
<span data-toggle="collapse" data-target="#excerpt_to_end"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a new video file with the first five seconds trimmed off the original">Excerpt to end</button></span>
<div class="recipe" data-toggle="collapse" data-target="#excerpt_to_end">Create a new video file with the first five seconds trimmed off the original</div>
<div id="excerpt_to_end" class="collapse">
<h3>Excerpt to end</h3>
<p class="link"></p>
@ -890,7 +887,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Excerpt to end -->
<!-- Excerpt from end -->
<span data-toggle="collapse" data-target="#excerpt_from_end"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a new video file with the final five seconds of the original">Excerpt from end</button></span>
<div class="recipe" data-toggle="collapse" data-target="#excerpt_from_end">Create a new video file with the final five seconds of the original</div>
<div id="excerpt_from_end" class="collapse">
<h3>Excerpt from end</h3>
<p class="link"></p>
@ -912,7 +909,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<h2 id="interlacing">Work with interlaced video</h2>
<!-- NTSC to H.264 -->
<span data-toggle="collapse" data-target="#ntsc_to_h264"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Upscaled, pillar-boxed HD H.264 access files from SD NTSC source">NTSC to H.264</button></span>
<div class="recipe" data-toggle="collapse" data-target="#ntsc_to_h264">Upscaled, pillar-boxed HD H.264 access files from SD NTSC source</div>
<div id="ntsc_to_h264" class="collapse">
<h3>Upscaled, Pillar-boxed HD H.264 Access Files from SD NTSC source</h3>
<p class="link"></p>
@ -935,7 +932,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends NTSC to H.264 -->
<!-- Deinterlace video -->
<span data-toggle="collapse" data-target="#deinterlace"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Deinterlace video">Deinterlace video</button></span>
<div class="recipe" data-toggle="collapse" data-target="#deinterlace">Deinterlace video</div>
<div id="deinterlace" class="collapse">
<h3>Deinterlace a video</h3>
<p class="link"></p>
@ -969,7 +966,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Deinterlace video -->
<!-- Inverse telecine -->
<span data-toggle="collapse" data-target="#inverse-telecine"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Inverse telecine video">Inverse telecine</button></span>
<div class="recipe" data-toggle="collapse" data-target="#inverse-telecine">Inverse telecine</div>
<div id="inverse-telecine" class="collapse">
<h3>Inverse telecine a video file</h3>
<p class="link"></p>
@ -999,7 +996,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Inverse telecine -->
<!-- Set field order -->
<span data-toggle="collapse" data-target="#set_field_order"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Set field order for interlaced video">Set field order</button></span>
<div class="recipe" data-toggle="collapse" data-target="#set_field_order">Set field order for interlaced video</div>
<div id="set_field_order" class="collapse">
<h3>Change field order of an interlaced video</h3>
<p class="link"></p>
@ -1015,7 +1012,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Set field order -->
<!-- Check interlacement -->
<span data-toggle="collapse" data-target="#check_interlacement"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Identify interlacement patterns in a video file">Check interlacement </button></span>
<div class="recipe" data-toggle="collapse" data-target="#check_interlacement">Identify interlacement patterns in a video file</div>
<div id="check_interlacement" class="collapse">
<h3>Check video file interlacement patterns</h3>
<p class="link"></p>
@ -1035,7 +1032,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<h2 id="overlay">Overlay timecode or text</h2>
<!-- Text Watermark -->
<span data-toggle="collapse" data-target="#text_watermark"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create opaque centered text watermark ">Text Watermark</button></span>
<div class="recipe" data-toggle="collapse" data-target="#text_watermark">Create opaque centered text watermark</div>
<div id="text_watermark" class="collapse">
<h3>Create centered, transparent text watermark</h3>
<p class="link"></p>
@ -1060,7 +1057,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Text watermark -->
<!-- Transparent Image Watermark -->
<span data-toggle="collapse" data-target="#image_watermark"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Overlay image watermark">Overlay image watermark on video</button></span>
<div class="recipe" data-toggle="collapse" data-target="#image_watermark">Overlay image watermark on video</div>
<div id="image_watermark" class="collapse">
<h3>Overlay image watermark on video</h3>
<p class="link"></p>
@ -1076,7 +1073,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Image Watermark -->
<!-- Burn in timecode-->
<span data-toggle="collapse" data-target="#burn_in_timecode"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Burn in timecode ">Burn in timecode</button></span>
<div class="recipe" data-toggle="collapse" data-target="#burn_in_timecode">Burn in timecode</div>
<div id="burn_in_timecode" class="collapse">
<h3>Create a burnt in timecode on your image</h3>
<p class="link"></p>
@ -1106,7 +1103,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<h2 id="create-images">Create thumbnails or GIFs</h2>
<!-- One thumbnail -->
<span data-toggle="collapse" data-target="#one_thumbnail"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Export one thumbnail per video file">One thumbnail</button></span>
<div class="recipe" data-toggle="collapse" data-target="#one_thumbnail">Export one thumbnail per video file</div>
<div id="one_thumbnail" class="collapse">
<h3>One thumbnail</h3>
<p class="link"></p>
@ -1123,7 +1120,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends One thumbnail -->
<!-- Multi thumbnail -->
<span data-toggle="collapse" data-target="#multi_thumbnail"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Export many thumbnails per video file">Many thumbnails</button></span>
<div class="recipe" data-toggle="collapse" data-target="#multi_thumbnail">Export many thumbnails per video file</div>
<div id="multi_thumbnail" class="collapse">
<h3>Many thumbnails</h3>
<p class="link"></p>
@ -1140,7 +1137,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Multi thumbnail -->
<!-- Images to GIF -->
<span data-toggle="collapse" data-target="#img_to_gif"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Converts images to GIF">Create GIF from still images</button></span>
<div class="recipe" data-toggle="collapse" data-target="#img_to_gif">Create GIF from still images</div>
<div id="img_to_gif" class="collapse">
<h3>Images to GIF</h3>
<p class="link"></p>
@ -1160,7 +1157,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Images to GIF -->
<!-- Create GIF -->
<span data-toggle="collapse" data-target="#create_gif"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a GIF from a video">Create GIF from a video</button></span>
<div class="recipe" data-toggle="collapse" data-target="#create_gif">Create GIF from a video</div>
<div id="create_gif" class="collapse">
<h3>Create GIF</h3>
<p class="link"></p>
@ -1196,7 +1193,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<h2 id="create-video">Create a video from images</h2>
<!-- Images to video -->
<span data-toggle="collapse" data-target="#images_2_video"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Transcode an image sequence into uncompressed 10-bit video">Image sequence into video</button></span>
<div class="recipe" data-toggle="collapse" data-target="#images_2_video">Transcode an image sequence into uncompressed 10-bit video</div>
<div id="images_2_video" class="collapse">
<h3>Transcode an image sequence into uncompressed 10-bit video</h3>
<p class="link"></p>
@ -1214,7 +1211,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Images to video -->
<!-- Create video from image and audio -->
<span data-toggle="collapse" data-target="#image-audio"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create video from image and audio">Create video from image and audio</button></span>
<div class="recipe" data-toggle="tooltip" data-toggle="collapse" data-target="#image-audio">Create video from image and audio</div>
<div id="image-audio" class="collapse">
<h3>Create a video from an image and audio file.</h3>
<p class="link"></p>
@ -1239,7 +1236,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<h2 id="filters-scopes">Use filters or scopes</h2>
<!-- abitscope -->
<span data-toggle="collapse" data-target="#abitscope"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Audio Bitscope">Audio Bitscope</button></span>
<div class="recipe" data-toggle="collapse" data-target="#abitscope">Audio Bitscope</div>
<div id="abitscope" class="collapse">
<h3>Creates a visualization of the bits in an audio stream</h3>
<p class="link"></p>
@ -1261,7 +1258,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends abitscope -->
<!-- astats -->
<span data-toggle="collapse" data-target="#astats"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Play a graphical output showing decibel levels of an input file">Graphic for audio</button></span>
<div class="recipe" data-toggle="collapse" data-target="#astats">Play a graphical output showing decibel levels of an input file</div>
<div id="astats" class="collapse">
<h3>Plays a graphical output showing decibel levels of an input file</h3>
<p class="link"></p>
@ -1289,7 +1286,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends astats -->
<!-- BRNG -->
<span data-toggle="collapse" data-target="#brng"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Identify pixels out of broadcast range">Broadcast Range</button></span>
<div class="recipe" data-toggle="collapse" data-target="#brng">Identify pixels out of broadcast range</div>
<div id="brng" class="collapse">
<h3>Shows all pixels outside of broadcast range</h3>
<p class="link"></p>
@ -1313,7 +1310,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends BRNG -->
<!-- Vectorscope -->
<span data-toggle="collapse" data-target="#vectorscope"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Vectorscope from video to screen">Vectorscope</button></span>
<div class="recipe" data-toggle="collapse" data-target="#vectorscope">Vectorscope from video to screen</div>
<div id="vectorscope" class="collapse">
<h3>Plays vectorscope of video</h3>
<p class="link"></p>
@ -1334,7 +1331,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends Vectorscope -->
<!--Side by Side Videos/Temporal Difference Filter-->
<span data-toggle="collapse" data-target="#tempdif"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Play two videos side by side while applying the temporal difference filter to both">Side by Side Videos/Temporal Difference Filter</button></span>
<div class="recipe" data-toggle="collapse" data-target="#tempdif">Side by Side Videos/Temporal Difference Filter</div>
<div id="tempdif" class="collapse">
<h3>This will play two input videos side by side while also applying the temporal difference filter to them</h3>
<p class="link"></p>
@ -1367,7 +1364,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<h2 id="metadata">View or strip metadata</h2>
<!-- Pull specs -->
<span data-toggle="collapse" data-target="#pull_specs"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Pull specs from video file">Pull specs</button></span>
<div class="recipe" data-toggle="collapse" data-target="#pull_specs">Pull specs from video file</div>
<div id="pull_specs" class="collapse">
<h3>Pull specs from video file</h3>
<p class="link"></p>
@ -1385,8 +1382,8 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
</div>
<!-- ends Pull specs -->
<!-- Strip metadata -->
<span data-toggle="collapse" data-target="#strip_metadata"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Strip metadata">Strip metadata</button></span>
<!-- Strip metadata -->
<div class="recipe" data-toggle="collapse" data-target="#strip_metadata">Strip metadata</div>
<div id="strip_metadata" class="collapse">
<h3>Strips metadata from video file</h3>
<p class="link"></p>
@ -1407,7 +1404,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<h2 id="preservation">Preservation tasks</h2>
<!-- batch processing (Mac/Linux) -->
<span data-toggle="collapse" data-target="#batch_processing_bash"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="FFmpeg batch processing on Mac/Linux">Batch processing (Mac/Linux)</button></span>
<div class="recipe" data-toggle="collapse" data-target="#batch_processing_bash">Batch processing (Mac/Linux)</div>
<div id="batch_processing_bash" class="collapse">
<h3>Create Bash script to batch process with FFmpeg</h3>
<p class="link"></p>
@ -1436,7 +1433,7 @@ e.g.: <code>ffmpeg -f concat -safe 0 -i mylist.txt -c copy <i>output_file</i></c
<!-- ends batch processing (Mac/Linux) -->
<!-- batch processing (Windows) -->
<span data-toggle="collapse" data-target="#batch_processing_win"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="FFmpeg batch processing on Windows">Batch processing (Windows)</button></span>
<div class="recipe" data-toggle="collapse" data-target="#batch_processing_win">Batch processing (Windows)</div>
<div id="batch_processing_win" class="collapse">
<h3>Create PowerShell script to batch process with FFmpeg</h3>
<p class="link"></p>
@ -1469,7 +1466,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends batch processing (Windows) -->
<!-- Create frame md5s -->
<span data-toggle="collapse" data-target="#create_frame_md5s_v"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create an MD5 checksum per video frame">Create MD5 checksums (video frames)</button></span>
<div class="recipe" data-toggle="collapse" data-target="#create_frame_md5s_v">Create MD5 checksums (video frames)</div>
<div id="create_frame_md5s_v" class="collapse">
<h3>Create MD5 checksums (video frames)</h3>
<p class="link"></p>
@ -1487,7 +1484,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Create frame md5s -->
<!-- Create frame md5s (audio) -->
<span data-toggle="collapse" data-target="#create_frame_md5s_a"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create MD5 checksums for audio samples">Create MD5 checksums (audio samples)</button></span>
<div class="recipe" data-toggle="collapse" data-target="#create_frame_md5s_a">Create MD5 checksums (audio samples)</div>
<div id="create_frame_md5s_a" class="collapse">
<h3>Create MD5 checksums (audio samples)</h3>
<p class="link"></p>
@ -1512,7 +1509,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Create frame md5s (audio) -->
<!-- QCTools Report -->
<span data-toggle="collapse" data-target="#qctools"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a QCTools report for a video file with audio track">QCTools report (with audio)</button></span>
<div class="recipe" data-toggle="collapse" data-target="#qctools">QCTools report (with audio)</div>
<div id="qctools" class="collapse">
<h3>Creates a QCTools report</h3>
<p class="link"></p>
@ -1536,7 +1533,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends QCTools Report -->
<!-- QCTools Report (no audio) -->
<span data-toggle="collapse" data-target="#qctools_no_audio"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create a QCTools report for a video file with no audio track">QCTools report (no audio)</button></span>
<div class="recipe" data-toggle="collapse" data-target="#qctools_no_audio">QCTools report (no audio)</div>
<div id="qctools_no_audio" class="collapse">
<h3>Creates a QCTools report</h3>
<p class="link"></p>
@ -1560,7 +1557,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends QCTools Report (no audio) -->
<!-- Check FFV1 fixity -->
<span data-toggle="collapse" data-target="#check_FFV1_fixity"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Decode your video and verify the internal CRC checksums">Check FFV1 fixity</button></span>
<div class="recipe" data-toggle="collapse" data-target="#check_FFV1_fixity">Check FFV1 fixity</div>
<div id="check_FFV1_fixity" class="collapse">
<h3>Check FFV1 Version 3 fixity</h3>
<p class="link"></p>
@ -1578,7 +1575,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Check FFV1 Fixity -->
<!-- Read/Extract EIA-608 Closed Captions -->
<span data-toggle="collapse" data-target="#readeia608"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Read or extract EIA-608 (Line 21) closed captioning">Read/Extract EIA-608 Closed Captioning</button></span>
<div class="recipe" data-toggle="collapse" data-target="#readeia608">Read/Extract EIA-608 Closed Captioning</div>
<div id="readeia608" class="collapse">
<h3>Read/Extract EIA-608 (Line 21) closed captioning</h3>
<p class="link"></p>
@ -1606,7 +1603,7 @@ ffmpeg -i $file -map 0 -c copy $output
<h2 id="test-files">Generate test files</h2>
<!-- Mandelbrot -->
<span data-toggle="collapse" data-target="#mandelbrot"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Make a mandelbrot test pattern video">Mandelbrot</button></span>
<div class="recipe" data-toggle="collapse" data-target="#mandelbrot">Make a mandelbrot test pattern video</div>
<div id="mandelbrot" class="collapse">
<h3>Makes a mandelbrot test pattern video</h3>
<p class="link"></p>
@ -1623,7 +1620,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Mandelbrot -->
<!-- SMPTE bars -->
<span data-toggle="collapse" data-target="#smpte_bars"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Make a SMPTE bars test pattern video">SMPTE bars</button></span>
<div class="recipe" data-toggle="collapse" data-target="#smpte_bars">Make a SMPTE bars test pattern video</div>
<div id="smpte_bars" class="collapse">
<h3>Makes a SMPTE bars test pattern video</h3>
<p class="link"></p>
@ -1640,7 +1637,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends SMPTE bars -->
<!-- Test pattern video -->
<span data-toggle="collapse" data-target="#test"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Make a test pattern video">Test pattern</button></span>
<div class="recipe" data-toggle="collapse" data-target="#test">Make a test pattern video</div>
<div id="test" class="collapse">
<h3>Make a test pattern video</h3>
<p class="link"></p>
@ -1658,7 +1655,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Test pattern video -->
<!-- Play HD SMPTE bars -->
<span data-toggle="collapse" data-target="#play_hd_smpte"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Test an HD video projector by playing the SMPTE colour bars pattern">Play HD SMPTE bars</button></span>
<div class="recipe" data-toggle="collapse" data-target="#play_hd_smpte">Play HD SMPTE bars</div>
<div id="play_hd_smpte" class="collapse">
<h3>Play HD SMPTE bars</h3>
<p class="link"></p>
@ -1673,7 +1670,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Play HD SMPTE bars -->
<!-- Play VGA SMPTE bars -->
<span data-toggle="collapse" data-target="#play_vga_smpte"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Test a VGA video projector by playing the SMPTE colour bars pattern">Play VGA SMPTE bars</button></span>
<div class="recipe" data-toggle="collapse" data-target="#play_vga_smpte">Play VGA SMPTE bars</div>
<div id="play_vga_smpte" class="collapse">
<h3>Play VGA SMPTE bars</h3>
<p class="link"></p>
@ -1688,7 +1685,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Play VGA SMPTE bars -->
<!-- Sine wave -->
<span data-toggle="collapse" data-target="#sine_wave"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Generate a test audio file playing a sine wave">Sine wave</button></span>
<div class="recipe" data-toggle="collapse" data-target="#sine_wave">Generate a sine wave test audio file</div>
<div id="sine_wave" class="collapse">
<h3>Sine wave</h3>
<p class="link"></p>
@ -1705,7 +1702,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Sine wave -->
<!-- SMPTE bars + Sine wave -->
<span data-toggle="collapse" data-target="#smpte_bars_and_sine_wave"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Generate a SMPTE bars test video + audio playing a sine wave">SMPTE bars + Sine wave audio</button></span>
<div class="recipe" data-toggle="collapse" data-target="#smpte_bars_and_sine_wave">SMPTE bars + Sine wave audio</div>
<div id="smpte_bars_and_sine_wave" class="collapse">
<h3>SMPTE bars + Sine wave audio</h3>
<p class="link"></p>
@ -1726,7 +1723,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends SMPTE bars + Sine wave -->
<!-- Broken File -->
<span data-toggle="collapse" data-target="#broken_file"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Make a broken file out of a perfectly good one">Broken file</button></span>
<div class="recipe" data-toggle="collapse" data-target="#broken_file">Make a broken file</div>
<div id="broken_file" class="collapse">
<h3>Makes a broken test file</h3>
<p class="link"></p>
@ -1747,7 +1744,7 @@ ffmpeg -i $file -map 0 -c copy $output
<h2 id="ocr">Use OCR</h2>
<!-- Show OCR -->
<span data-toggle="collapse" data-target="#ocr_on_top"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Play video with OCR on top">Show OCR</button></span>
<div class="recipe" data-toggle="collapse" data-target="#ocr_on_top">Play video with OCR</div>
<div id="ocr_on_top" class="collapse">
<h3>Plays video with OCR on top</h3>
<p class="link"></p>
@ -1770,7 +1767,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Show OCR -->
<!-- Export OCR -->
<span data-toggle="collapse" data-target="#ffprobe_ocr"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Export OCR from video to screen">Export OCR</button></span>
<div class="recipe" data-toggle="collapse" data-target="#ffprobe_ocr">Export OCR from video to screen</div>
<div id="ffprobe_ocr" class="collapse">
<h3>Exports OCR data to screen</h3>
<p class="link"></p>
@ -1791,7 +1788,7 @@ ffmpeg -i $file -map 0 -c copy $output
<h2 id="perceptual-similarity">Compare perceptual similarity of videos</h2>
<!-- Compare Video Fingerprints -->
<span data-toggle="collapse" data-target="#compare_video_fingerprints"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Compare Video Fingerprints">Compare Video Fingerprints</button></span>
<div class="recipe" data-toggle="collapse" data-target="#compare_video_fingerprints">Compare Video Fingerprints</div>
<div id="compare_video_fingerprints" class="collapse">
<h3>Compare two video files for content similarity using perceptual hashing</h3>
<p class="link"></p>
@ -1808,7 +1805,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Compare Video Fingerprints -->
<!-- Generate Video Fingerprint -->
<span data-toggle="collapse" data-target="#generate_video_fingerprint"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Generate Video Fingerprint">Generate Video Fingerprint</button></span>
<div class="recipe" data-toggle="collapse" data-target="#generate_video_fingerprint">Generate Video Fingerprint</div>
<div id="generate_video_fingerprint" class="collapse">
<h3>Generate a perceptual hash for an input video file</h3>
<p class="link"></p>
@ -1828,7 +1825,7 @@ ffmpeg -i $file -map 0 -c copy $output
<h2 id="other">Other</h2>
<!-- Play image sequence -->
<span data-toggle="collapse" data-target="#play_im_seq"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Play an image sequence directly as moving images">Play an image sequence</button></span>
<div class="recipe" data-toggle="collapse" data-target="#play_im_seq">Play an image sequence</div>
<div id="play_im_seq" class="collapse">
<h3>Play an image sequence</h3>
<p class="link"></p>
@ -1849,7 +1846,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Play image sequence -->
<!-- Split audio and video tracks -->
<span data-toggle="collapse" data-target="#split_audio_video"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create separate audio and video tracks from an audiovisual file">Split audio and video tracks</button></span>
<div class="recipe" data-toggle="collapse" data-target="#split_audio_video">Split audio and video tracks</div>
<div id="split_audio_video" class="collapse">
<h3>Split audio and video tracks</h3>
<p class="link"></p>
@ -1867,7 +1864,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Split audio and video tracks -->
<!-- Flip image -->
<span data-toggle="collapse" data-target="#flip_image"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Flip the image">Flip video image</button></span>
<div class="recipe" data-toggle="collapse" data-target="#flip_image">Flip video image</div>
<div id="flip_image" class="collapse">
<h3>Flip the video image horizontally and/or vertically</h3>
<p class="link"></p>
@ -1884,7 +1881,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Flip image -->
<!-- Create ISO -->
<span data-toggle="collapse" data-target="#create_iso"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Create ISO files for DVD access">Create ISO</button></span>
<div class="recipe" data-toggle="collapse" data-target="#create_iso">Create ISO files for DVD access</div>
<div id="create_iso" class="collapse">
<h3>Create ISO files for DVD access</h3>
<p class="link"></p>
@ -1902,7 +1899,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Create ISO -->
<!-- Scene Detection using YDIF -->
<span data-toggle="collapse" data-target="#csv-ydif"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Exports CSV for scene detection using YDIF">CSV with timecodes and YDIF</button></span>
<div class="recipe" data-toggle="collapse" data-target="#csv-ydif">CSV with timecodes and YDIF</div>
<div id="csv-ydif" class="collapse">
<h3>Exports CSV for scene detection using YDIF</h3>
<p class="link"></p>
@ -1922,7 +1919,7 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends sample Scene Detection using YDIF -->
<!-- Cover head switching noise -->
<span data-toggle="collapse" data-target="#cover_head"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Cover head switching noise">Cover head switching noise</button></span>
<div class="recipe" data-toggle="collapse" data-target="#cover_head">Cover head switching noise</div>
<div id="cover_head" class="collapse">
<h3>Cover head switching noise</h3>
<p class="link"></p>
@ -1946,47 +1943,47 @@ ffmpeg -i $file -map 0 -c copy $output
<!-- ends Cover head switching noise -->
<!-- Record and live-stream simultaneously -->
<span data-toggle="collapse" data-target="#record-and-stream"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Record and live-stream simultaneously">Record and live-stream simultaneously</button></span>
<div id="record-and-stream" class="collapse">
<h3>Record and live-stream simultaneously</h3>
<p class="link"></p>
<p><code>ffmpeg -re -i <i>${INPUTFILE}</i> -map 0 -flags +global_header -vf scale="1280:-1,format=yuv420p" -pix_fmt yuv420p -level 3.1 -vsync passthrough -crf 26 -g 50 -bufsize 3500k -maxrate 1800k -c:v libx264 -c:a aac -b:a 128000 -r:a 44100 -ac 2 -t ${STREAMDURATION} -f tee <i>"[movflags=+faststart]${TARGETFILE}|[f=flv]${STREAMTARGET}"</i></code></p>
<p>I use this script to stream to a RTMP target and record the stream locally as .mp4 with only one ffmpeg-instance.</p>
<p>As input, I use <code>bmdcapture</code> which is piped to ffmpeg. But it can also be used with a static videofile as input.</p>
<p>The input will be scaled to 1280px width, maintaining height. Also the stream will stop after a given time (see <code>-t</code> option.)</p>
<h4>Notes</h4>
<ol>
<li>I recommend to use this inside a shell script - then you can define the variables <code>${INPUTFILE}</code>, <code>${STREAMDURATION}</code>, <code>${TARGETFILE}</code>, and <code>${STREAMTARGET}</code>.</li>
<li>This is in daily use to live-stream a real-world TV show. No errors for nearly 4 years. Some parameters were found by trial-and-error or empiric testing. So suggestions/questions are welcome.</li>
</ol>
<dl>
<dt>ffmpeg </dt><dd>starts the command</dd>
<dt>-re </dt><dd>Read input at native framerate</dd>
<dt>-i input.mov </dt><dd>The input file. Can also be a <code>-</code> to use STDIN if you pipe in from webcam or SDI.</dd>
<dt>-map 0 </dt><dd>map ALL streams from input file to output</dd>
<dt>-flags +global_header </dt><dd>Don't place extra data in every keyframe</dd>
<dt>-vf scale="1280:-1" </dt><dd>Scale to 1280 width, maintain aspect ratio.</dd>
<dt>-pix_fmt yuv420p </dt><dd>convert to 4:2:0 chroma subsampling scheme</dd>
<dt>-level 3.1 </dt><dd>H264 Level (defines some thresholds for bitrate)</dd>
<dt>-vsync passthrough </dt><dd>Each frame is passed with its timestamp from the demuxer to the muxer.</dd>
<dt>-crf 26 </dt><dd>Constant rate factor - basically the quality</dd>
<dt>-g 50 </dt><dd>GOP size.</dd>
<dt>-bufsize 3500k </dt><dd>Ratecontrol buffer size (~ maxrate x2)</dd>
<dt>-maxrate 1800k </dt><dd>Maximum bit rate</dd>
<dt>-c:v libx264 </dt><dd>encode output video stream as H.264</dd>
<dt>-c:a aac </dt><dd>encode output audio stream as AAC</dd>
<dt>-b:a 128000 </dt><dd>The audio bitrate</dd>
<dt>-r:a 44100 </dt><dd>The audio samplerate</dd>
<dt>-ac 2 </dt><dd>Two audio channels</dd>
<dt>-t ${STREAMDURATION} </dt><dd>Time (in seconds) after which the stream should automatically end.</dd>
<dt>-f tee </dt><dd>Use multiple outputs. Outputs defined below.</dd>
<dt>"[movflags=+faststart]target-file.mp4|[f=flv]rtmp://stream-url/stream-id"</dt><dd>The outputs, separated by a pipe (|). The first is the local file, the second is the live stream. Options for each target are given in square brackets before the target.</dd>
</dl>
</div>
<div class="recipe" data-toggle="collapse" data-target="#record-and-stream">Record and live-stream simultaneously</div>
<div id="record-and-stream" class="collapse">
<h3>Record and live-stream simultaneously</h3>
<p class="link"></p>
<p><code>ffmpeg -re -i <i>${INPUTFILE}</i> -map 0 -flags +global_header -vf scale="1280:-1,format=yuv420p" -pix_fmt yuv420p -level 3.1 -vsync passthrough -crf 26 -g 50 -bufsize 3500k -maxrate 1800k -c:v libx264 -c:a aac -b:a 128000 -r:a 44100 -ac 2 -t ${STREAMDURATION} -f tee <i>"[movflags=+faststart]${TARGETFILE}|[f=flv]${STREAMTARGET}"</i></code></p>
<p>I use this script to stream to a RTMP target and record the stream locally as .mp4 with only one ffmpeg-instance.</p>
<p>As input, I use <code>bmdcapture</code> which is piped to ffmpeg. But it can also be used with a static videofile as input.</p>
<p>The input will be scaled to 1280px width, maintaining height. Also the stream will stop after a given time (see <code>-t</code> option.)</p>
<h4>Notes</h4>
<ol>
<li>I recommend to use this inside a shell script - then you can define the variables <code>${INPUTFILE}</code>, <code>${STREAMDURATION}</code>, <code>${TARGETFILE}</code>, and <code>${STREAMTARGET}</code>.</li>
<li>This is in daily use to live-stream a real-world TV show. No errors for nearly 4 years. Some parameters were found by trial-and-error or empiric testing. So suggestions/questions are welcome.</li>
</ol>
<dl>
<dt>ffmpeg </dt><dd>starts the command</dd>
<dt>-re </dt><dd>Read input at native framerate</dd>
<dt>-i input.mov </dt><dd>The input file. Can also be a <code>-</code> to use STDIN if you pipe in from webcam or SDI.</dd>
<dt>-map 0 </dt><dd>map ALL streams from input file to output</dd>
<dt>-flags +global_header </dt><dd>Don't place extra data in every keyframe</dd>
<dt>-vf scale="1280:-1" </dt><dd>Scale to 1280 width, maintain aspect ratio.</dd>
<dt>-pix_fmt yuv420p </dt><dd>convert to 4:2:0 chroma subsampling scheme</dd>
<dt>-level 3.1 </dt><dd>H264 Level (defines some thresholds for bitrate)</dd>
<dt>-vsync passthrough </dt><dd>Each frame is passed with its timestamp from the demuxer to the muxer.</dd>
<dt>-crf 26 </dt><dd>Constant rate factor - basically the quality</dd>
<dt>-g 50 </dt><dd>GOP size.</dd>
<dt>-bufsize 3500k </dt><dd>Ratecontrol buffer size (~ maxrate x2)</dd>
<dt>-maxrate 1800k </dt><dd>Maximum bit rate</dd>
<dt>-c:v libx264 </dt><dd>encode output video stream as H.264</dd>
<dt>-c:a aac </dt><dd>encode output audio stream as AAC</dd>
<dt>-b:a 128000 </dt><dd>The audio bitrate</dd>
<dt>-r:a 44100 </dt><dd>The audio samplerate</dd>
<dt>-ac 2 </dt><dd>Two audio channels</dd>
<dt>-t ${STREAMDURATION} </dt><dd>Time (in seconds) after which the stream should automatically end.</dd>
<dt>-f tee </dt><dd>Use multiple outputs. Outputs defined below.</dd>
<dt>"[movflags=+faststart]target-file.mp4|[f=flv]rtmp://stream-url/stream-id"</dt><dd>The outputs, separated by a pipe (|). The first is the local file, the second is the live stream. Options for each target are given in square brackets before the target.</dd>
</dl>
</div>
<!-- END Record and live-stream at the same time -->
<!-- View Subprogram Info -->
<span data-toggle="collapse" data-target="#view_subprogram_info"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="View FFmpeg subprogram information">View FFmpeg subprogram information</button></span>
<div class="recipe" data-toggle="collapse" data-target="#view_subprogram_info">View FFmpeg subprogram information</div>
<div id="view_subprogram_info" class="collapse">
<h3>View information about a specific decoder, encoder, demuxer, muxer, or filter</h3>
<p class="link"></p>
@ -2012,7 +2009,7 @@ ffmpeg -i $file -map 0 -c copy $output
</div>
<!-- sample example -->
<!-- <span data-toggle="collapse" data-target="#*****unique name*****"><button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="*****Hover-over description*****">*****Small title****</button></span>
<!-- <div class="recipe" data-toggle="collapse" data-target="#*****unique name*****">*****Title****</div>
Change the above data-target field, the hover-over description, the button text, and the below div ID
<div id="*****unique name*****" class="collapse">
<h3>*****Longer title*****</h3>