Compare commits

...

15 Commits

Author SHA1 Message Date
Reto Kromer
bd0ac73d78 uniform typography 2017-03-07 15:54:07 +01:00
Ashley
7e7da29093 Merge pull request #162 from amiaopensource/unify
typography
2017-03-07 09:31:17 -05:00
Reto Kromer
47acc400ce Update index.html 2017-03-07 12:49:09 +01:00
Reto Kromer
c117e18c0c Update index.html 2017-03-07 12:46:39 +01:00
Reto Kromer
0921bd68d5 Update index.html 2017-03-07 12:45:51 +01:00
Reto Kromer
d0e13f3eb6 resolve conflict 2017-03-07 12:42:36 +01:00
Reto Kromer
82a1cfeb8b Merge pull request #163 from kieranjol/patch-1
colorspace - typo
2017-03-07 10:45:12 +01:00
Kieran O'Leary
472fcfe833 colorspace - typo 2017-03-07 08:43:11 +00:00
Reto Kromer
0907590913 typography
- modify `'` --> `’` in text
- modify `" … "` --> `“ … ”` in text
- modify `http` --> `https` when possible
- unify newline after `<br>`
- add note `-vf is an alias of -filter:v` in the ffmpeg commands
2017-03-06 15:32:26 +01:00
Ashley
0ed5cfff65 Merge pull request #161 from amiaopensource/css
one `.btn`
2017-03-05 12:41:37 -05:00
Reto Kromer
e3deb3af4e add ;
for coherence
2017-03-05 06:49:49 +01:00
Reto Kromer
5869850d4b one .btn
- group into a single `.btn`
- add spaces for readability
2017-03-05 06:43:51 +01:00
Reto Kromer
a5a49e1f28 Merge pull request #160 from kfrn/gh-pages
Inverse telecine command
2017-03-04 20:40:37 +01:00
kfrn
cdd65fd765 Add example images; media queries 2017-03-05 08:34:16 +13:00
kfrn
c85d6c5874 Add inverse telecine command 2017-03-04 23:25:12 +13:00
4 changed files with 68 additions and 20 deletions

View File

@@ -1,4 +1,4 @@
h1,h2,h3,h4,h5,h6 {
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
}
@@ -11,13 +11,14 @@ dd {
}
dt {
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.sample-image {
@@ -37,9 +38,6 @@ div {
.btn {
margin: 8px;
}
.btn {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
@@ -53,6 +51,7 @@ div {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.btn:before {
content: "💫";
position: absolute;
@@ -67,6 +66,7 @@ div {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.btn:hover:before, .btn:focus:before, .btn:active:before {
-webkit-transform: scale(1.3) translateZ(0);
transform: scale(1.3) translateZ(0);
@@ -78,7 +78,7 @@ div {
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px
border-radius: 4px;
}
.beware {
@@ -88,3 +88,15 @@ div {
.footnote {
font-size: 90%;
}
@media only screen and (min-width: 576px) {
img {
max-width: 60%;
}
}
@media only screen and (min-width: 992px) {
img {
width: 100%;
}
}

BIN
img/ivtc_originalvideo.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
img/ivtc_result.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@@ -3,11 +3,9 @@
<head>
<title>ffmprovisr</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Montserrat|Merriweather' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Merriweather" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/css.css">
<script src="js/jquery.min.js"></script>
<script src="js/js.js"></script>
<script src="js/bootstrap.min.js"></script>
@@ -32,7 +30,8 @@
<p>For instructions on how to install FFmpeg on Mac, Linux, and Windows, refer to Reto Kromers <a href="https://avpres.net/FFmpeg/#ch1" target="_blank">installation instructions</a>.</p>
<p>For Bash and command line basics, try the <a href="https://learnpythonthehardway.org/book/appendixa.html" target="_blank">Command Line Crash Course</a>. For a little more context presented in an ffmprovisr style, try <a href="http://explainshell.com/" target="_blank">explainshell.com</a>!</p>
<h5>License</h5>
<p><a target="_blank" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"></a><br>This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a></p>
<p><a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"></a><br>
This work is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.</p>
<h5>Sister projects</h5>
<p><a target="_blank" href="http://dd388.github.io/crals/">Script Ahoy</a>: Community Resource for Archivists and Librarians Scripting</p>
<p><a target="_blank" href="https://datapraxis.github.io/sourcecaster/">The Sourcecaster</a>: an app that helps you use the command line to work through common challenges that come up when working with digital primary sources.</p>
@@ -87,7 +86,7 @@
<dt>-c:a aac</dt><dd>sets the audio codec to AAC</dd>
<dt>-b:a 128k</dt><dd>sets the bitrate of the audio to 128k</dd>
<dt>-dither_method modified_e_weighted</dt><dd>Dither makes sure you dont unnecessarily truncate the dynamic range of your audio.</dd>
<dt>-ar 44100</dt><dd>sets the audio sampling frequency to 44100 Hz, or 44.1 kHz, or "CD quality"</dd>
<dt>-ar 44100</dt><dd>sets the audio sampling frequency to 44100 Hz, or 44.1 kHz, or CD quality</dd>
<dt><i>output_file</i></dt><dd>path and name of the output file</dd>
</dl>
<p class="link"></p>
@@ -271,7 +270,7 @@
</div>
<!-- ends SD to HD -->
<!-- 16:9 to 4:3 -->
<!-- 16:9 to 4:3 -->
<span data-toggle="modal" data-target="#HD_SD"><button type="button" class="btn btn-default" 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 id="HD_SD" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
@@ -283,7 +282,8 @@
<dl>
<dt>ffmpeg</dt><dd>starts the command</dd>
<dt>-i <i>input_file</i></dt><dd>path, name and extension of the input file</dd>
<dt>-filter:v "pad=iw:iw*3/4:(ow-iw)/2:(oh-ih)/2"</dt><dd>video padding<br>This resolution independent formula is actually padding any aspect ratio into 4:3 by letterboxing, because the video filter uses relative values for input width (iw), input height (ih), output width (ow) and output height (oh).</dd>
<dt>-filter:v "pad=iw:iw*3/4:(ow-iw)/2:(oh-ih)/2"</dt><dd>video padding<br>
This resolution independent formula is actually padding any aspect ratio into 4:3 by letterboxing, because the video filter uses relative values for input width (iw), input height (ih), output width (ow) and output height (oh).</dd>
<dt>-c:a copy</dt><dd>re-encodes using the same audio codec<br>
For silent videos you can replace <code>-c:a copy</code> by <code>-an</code>.</dd>
<dt><i>output_file</i></dt><dd>path, name and extension of the output file</dd>
@@ -349,7 +349,7 @@
</div>
<!-- ends Change display aspect ratio without re-encoding video -->
<!-- MKV to MP4 -->
<!-- MKV to MP4 -->
<span data-toggle="modal" data-target="#mkv_to_mp4"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Convert Matroska (MKV) to MP4">MKV to MP4</button></span>
<div id="mkv_to_mp4" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
@@ -376,7 +376,7 @@
</div>
<!-- ends MKV to MP4 -->
<!-- Images to GIF -->
<!-- Images to GIF -->
<span data-toggle="modal" data-target="#img_to_gif"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Converts images to GIF">Images to GIF</button></span>
<div id="img_to_gif" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
@@ -391,7 +391,7 @@
<dt>-framerate 9</dt><dd>sets framerate to 9 frames per second</dd>
<dt>-pattern_type glob</dt><dd>tells ffmpeg that the following mapping should "interpret like a <a href="https://en.wikipedia.org/wiki/Glob_%28programming%29" target="_blank">glob</a>" (a "global command" function that relies on the * as a wildcard and finds everything that matches)</dd>
<dt>-i <i>"input_image_*.jpg"</i></dt><dd>maps all files in the directory that start with input_image_, for example input_image_001.jpg, input_image_002.jpg, input_image_003.jpg... etc.<br>
(The quotation marks are necessary for the above "glob" pattern!)</dd>
(The quotation marks are necessary for the above glob pattern!)</dd>
<dt>-vf scale=250x250</dt><dd>filter the video to scale it to 250x250; -vf is an alias for -filter:v</dd>
<dt><i>output_file.gif</i></dt><dd>path and name of the output file</dd>
</dl>
@@ -486,13 +486,13 @@
<dt>ffmpeg</dt><dd>starts the command</dd>
<dt>-i <i>input file</i></dt><dd>path, name and extension of the input file</dd>
<dt>-c:v libx264</dt><dd>tells ffmpeg to encode the video stream as H.264</dd>
<dt>-vf</dt><dd>video filtering will be used<dd>
<dt>-vf</dt><dd>video filtering will be used (<code>-vf</code> is an alias of <code>-filter:v</code>)</dd>
<dt><i>"</i></dt><dd>start of filtergraph (see below)</dd>
<dt><i>yadif</i></dt><dd>deinterlacing filter (yet another deinterlacing filter)<br>
By default, <a href="https://ffmpeg.org/ffmpeg-filters.html#yadif-1" target="_blank">yadif</a> will output one frame for each frame. Outputting one frame for each <i>field</i> (thereby doubling the frame rate) with <code>yadif=1</code> may produce visually better results.</dd>
<dt><i>,</i></dt><dd>separates filters</dd>
<dt><i>format=yuv420p</i></dt><dd>chroma subsampling set to 4:2:0<br>
By default, <code>libx264</code> will use a chroma subsampling scheme that is the closest match to that of the input. This can result in YC<sub>B</sub>C<sub>R</sub> 4:2:0, 4:2:2, or 4:4:4 chroma subsampling. QuickTime and most other non-FFmpeg based players cant decode H.264 files that are not 4:2:0, therefore it's advisable to specify 4:2:0 chroma subsampling.</dd>
By default, <code>libx264</code> will use a chroma subsampling scheme that is the closest match to that of the input. This can result in YC<sub>B</sub>C<sub>R</sub> 4:2:0, 4:2:2, or 4:4:4 chroma subsampling. QuickTime and most other non-FFmpeg based players cant decode H.264 files that are not 4:2:0, therefore its advisable to specify 4:2:0 chroma subsampling.</dd>
<dt><i>"</i></dt><dd>end of filtergraph</dd>
<dt><i>output file</i></dt><dd>path, name and extension of the output file</dd>
</dl>
@@ -559,10 +559,10 @@
<img src="./img/colourspace_metadata_mediainfo.png" alt="MediaInfo screenshots of colourspace metadata"><br>
<p><span class="beware"></span> Using this command it is possible to add Rec.709 tags to a file that is actually Rec.601 (etc), so apply with caution!</p>
<p>These commands are relevant for H.264 and H.265 videos, encoded with <code>libx264</code> and <code>libx265</code> respectively.</p>
<p><b>Note</b>: If you wish to embed colourspace metadata <i>without</i> changing to another colourspace, omit <code>-vf colormatrix=src:dst</code>. However, since it is <code>libx264</code>/<code>libx265</code> that writes the metadata, it's not possible to add these tags without reencoding the video stream.</p>
<p><b>Note</b>: If you wish to embed colourspace metadata <i>without</i> changing to another colourspace, omit <code>-vf colormatrix=src:dst</code>. However, since it is <code>libx264</code>/<code>libx265</code> that writes the metadata, its not possible to add these tags without reencoding the video stream.</p>
<p>For all possible values for <code>-color_primaries</code>, <code>-color_trc</code>, and <code>-colorspace</code>, see the ffmpeg documentation on <a href="./index.html#Codec-Options" target="_blank">codec options</a>.</p>
<hr>
<p id="fn1" class="footnote">1. Out of step with the regular pattern, <code>-color-trc</code> doesn't accept <code>bt470bg</code>; it is instead here referred to directly as gamma.<br>
<p id="fn1" class="footnote">1. Out of step with the regular pattern, <code>-color_trc</code> doesnt accept <code>bt470bg</code>; it is instead here referred to directly as gamma.<br>
In the Rec.601 standard, 525-line/NTSC and 625-line/PAL video have assumed gammas of 2.2 and 2.8 respectively. <a href="#ref1" title="Jump back."></a></p>
<p class="link"></p>
</div>
@@ -571,6 +571,42 @@
</div>
<!-- ends Convert colourspace -->
<!-- Inverse telecine -->
<span data-toggle="modal" data-target="#inverse-telecine"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Inverse telecine video">Inverse telecine</button></span>
<div id="inverse-telecine" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="well">
<h3>Inverse telecine a video file</h3>
<p><code>ffmpeg -i <i>input_file</i> -c:v libx264 -vf "fieldmatch,yadif,decimate" <i>output_file</i></code></p>
<p>The inverse telecine procedure reverses the <a href="https://en.wikipedia.org/wiki/Three-two_pull_down">3:2 pull down</a> process, restoring 29.97fps interlaced video to the 24fps frame rate of the original film source.</p>
<dl>
<dt>ffmpeg</dt><dd>starts the command</dd>
<dt>-i <i>input file</i></dt><dd>path, name and extension of the input file</dd>
<dt>-c:v libx264</dt><dd>encode video as H.264</dd>
<dt>-vf "fieldmatch,yadif,decimate"</dt><dd>applies these three video filters to the input video.<br>
<a href="https://ffmpeg.org/ffmpeg-filters.html#fieldmatch">Fieldmatch</a> is a field matching filter for inverse telecine - it reconstructs the progressive frames from a telecined stream.<br>
<a href="https://ffmpeg.org/ffmpeg-filters.html#yadif-1">Yadif</a> (yet another deinterlacing filter) deinterlaces the video. (Note that ffmpeg also includes several other deinterlacers).<br>
<a href="https://ffmpeg.org/ffmpeg-filters.html#decimate-1">Decimate</a> deletes duplicated frames.</dd>
<dt><i>output file</i></dt><dd>path, name and extension of the output file</dd>
</dl>
<p> <code>"fieldmatch,yadif,decimate"</code> is an ffmpeg <a href="https://trac.ffmpeg.org/wiki/FilteringGuide#FiltergraphChainFilterrelationship" target="_blank">filtergraph</a>. Here the filtergraph is made up of one filter chain, which is itself made up of the three filters (separated by commas).<br>
The enclosing quote marks are necessary when you use spaces within the filtergraph, e.g. <code>-vf "fieldmatch, yadif, decimate"</code>, and are included above as an example of good practice.</p>
<p>Note that if applying an inverse telecine procedure to a 29.97i file, the output framerate will actually be 23.976fps.</p>
<p>This command can also be used to restore other framerates.</p>
<div class="sample-image">
<h4>Example</h4>
<p>Before and after inverse telecine:</p>
<img src="img/ivtc_originalvideo.gif" alt="GIF of original video">
<img src="img/ivtc_result.gif" alt="GIF of video after inverse telecine">
</div>
<p class="link"></p>
</div>
</div>
</div>
</div>
<!-- ends Inverse telecine -->
</div>
<div class="well">
<h4>Filters</h4>