Add recipes for merging files & cropping video (#277)

css/css.css

@@ -150,6 +150,13 @@ img {
   text-align: center;
 }
 
+.sample-image-small {
+  margin: 0 auto;
+  margin-bottom: 18px;
+  max-width: 250px;
+  text-align: center;
+}
+
 div {
   font-family: 'Merriweather', serif;
   color: white;

index.html

@@ -666,6 +666,36 @@
     </div>
     <!-- ends Make stream properties explicate -->
 
+    <!-- Crop video -->
+    <label class="recipe" for="crop_video">Crop video</label>
+    <input type="checkbox" id="crop_video">
+    <div class="hiding">
+      <h3>Crop video</h3>
+      <p><code>ffmpeg -i <i>input_file</i> -vf "crop=<i>width</i>:<i>height</i>" <i>output_file</i></code></p>
+      <p>This command crops the input video to the dimensions defined</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>-vf "<i>width</i>:<i>height</i>"</dt><dd>Crops the video to the given width and height (in pixels).<br>
+          By default, the crop area is centred: that is, the position of the top left of the cropped area is set to x = (<i>input_width</i> - <i>output_width</i>) / 2, y = <i>input_height</i> - <i>output_height</i>) / 2.
+        </dd>
+        <dt><i>output_file</i></dt><dd>path, name and extension of the output file</dd>
+      </dl>
+      <p>It's also possible to specify the crop position by adding the x and y coordinates representing the top left of your cropped area to your crop filter, as such:</p>
+      <p><code>ffmpeg -i <i>input_file</i> -vf "crop=<i>width</i>:<i>height</i>[:<i>x_position</i>:<i>y_position</i>]" <i>output_file</i></code></p>
+      <h3>Examples</h3>
+      <p>The original frame, a screenshot of the SMPTE colourbars:</p>
+      <img class="sample-image" src="img/crop_example_orig.png" alt="VLC screenshot of Maggie Cheung">
+      <p>Result of the command <code>ffmpeg -i <i>smpte_coloursbars.mov</i> -vf "crop=500:500" <i>output_file</i></code>:</p>
+      <img class="sample-image-small" src="img/crop_example_aftercrop1.png" alt="VLC screenshot of Maggie Cheung, cropped from original">
+      <p>Result of the command <code>ffmpeg -i <i>smpte_coloursbars.mov</i> -vf "crop=500:500:0:0" <i>output_file</i></code>, appending <code>:0:0</code> to crop from the top left corner:</p>
+      <img class="sample-image-small" src="img/crop_example_aftercrop2.png" alt="VLC screenshot of Maggie Cheung, cropped from original">
+      <p>Result of the command <code>ffmpeg -i <i>smpte_coloursbars.mov</i> -vf "crop=500:300:500:30" <i>output_file</i></code>:</p>
+      <img class="sample-image-small" src="img/crop_example_aftercrop3.png" alt="VLC screenshot of Maggie Cheung, cropped from original">
+      <p class="link"></p>
+    </div>
+    <!-- ends Crop video -->
+
     </div>
     <div class="well">
     <h2 id="audio-files">Change or view audio properties</h2>
@@ -1966,20 +1996,44 @@
       <input type="checkbox" id="split_audio_video">
       <div class="hiding">
         <h3>Split audio and video tracks</h3>
-        <p><code>ffmpeg -i <i>input_file</i> -map <i>0:v:0 video_output_file</i> -map <i>0:a:0 audio_output_file</i></code></p>
+        <p><code>ffmpeg -i <i>input_file</i> -map 0:v:0 <i>video_output_file</i> -map 0:a:0 <i>audio_output_file</i></code></p>
         <p>This command splits the original input file into a video and audio stream. The -map command identifies which streams are mapped to which file. To ensure that you’re mapping the right streams to the right file, run ffprobe before writing the script to identify which streams are desired.</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>-map <i>0:v:0</i></dt><dd>grabs the first video stream and maps it into:</dd>
+          <dt>-map 0:v:0</dt><dd>grabs the first video stream and maps it into:</dd>
           <dt><i>video_output_file</i></dt><dd>path, name and extension of the video output file</dd>
-          <dt>-map <i>0:a:0</i></dt><dd>grabs the first audio stream and maps it into:</dd>
+          <dt>-map 0:a:0</dt><dd>grabs the first audio stream and maps it into:</dd>
           <dt><i>audio_output_file</i></dt><dd>path, name and extension of the audio output file</dd>
         </dl>
         <p class="link"></p>
       </div>
       <!-- ends Split audio and video tracks -->
 
+      <!-- Merge audio and video tracks -->
+      <label class="recipe" for="merge_audio_video">Merge audio and video tracks</label>
+      <input type="checkbox" id="merge_audio_video">
+      <div class="hiding">
+        <h3>Merge audio and video tracks</h3>
+        <p><code>ffmpeg -i <i>video_file</i> -i <i>audio_file</i> -map 0:v -map 1:a -c copy <i>output_file</i></code></p>
+        <p>This command takes a video file and an audio file as inputs, and creates an output file that combines the video stream in the first file with the audio stream in the second file.</p>
+        <dl>
+          <dt>ffmpeg</dt><dd>starts the command</dd>
+          <dt>-i <i>video_file</i></dt><dd>path, name and extension of the first input file (the video file)</dd>
+          <dt>-i <i>audio_file</i></dt><dd>path, name and extension of the second input file (the audio file)</dd>
+          <dt>-map <i>0:v</i></dt><dd>selects the video streams from the first input file</dd>
+          <dt>-map <i>1:a</i></dt><dd>selects the audio streams from the second input file</dd>
+          <dt>-c copy</dt><dd>copies streams without re-encoding</dd>
+          <dt><i>output_file</i></dt><dd>path, name and extension of the output file</dd>
+        </dl>
+        <p><b>Note:</b> in the example above, the video input file is given prior to the audio input file. However, input files can be added any order, as long as they are indexed correctly when stream mapping with <code>-map</code>. See the entry on <a href="#stream-mapping">stream mapping</a>.</p>
+        <h4>Variation:</h4>
+        <p>Include the audio tracks from both input files with the following command:</p>
+        <p><code>ffmpeg -i <i>video_file</i> -i <i>audio_file</i> -map 0:v -map 0:a -map 1:a -c copy <i>output_file</i></code></p>
+        <p class="link"></p>
+      </div>
+      <!-- ends Merge audio and video tracks -->
+
       <!-- Create ISO -->
       <label class="recipe" for="create_iso">Create ISO files for DVD access</label>
       <input type="checkbox" id="create_iso">