ffmprovisr/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ffmprovisr</title>
    <meta charset="utf-8">

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/css.css">
    <link href="css/jquery.steps.css" rel="stylesheet" >

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/js.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </head>

  <div class="container">

  <div class="text-center">
    <h1>➺ ffmprovisr ❥</h1>
    <br/>
  </div>

<!-- BUTTONS! -->
<div class="row">

       <div class="well col-md-3 col-md-offset-0">
        <br>
          <h5>Making FFmpeg Easier</h5>
          <p>FFmpeg is a powerful tool for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with a command line interface. This app helps users through the command generation process so that more people can reap the benefits of the FFmpeg. </p>
          <p>This project is very much a work in progress. Each button displays helpful information about how to perform a wide variety of tasks using FFmpeg. To use this site, click on the task you would like to perform. A new window will open up with a sample command and a description of how that command works. You can copy this command, and after specifying an [input] and possibly an [output], you can then use this command in a Terminal.</p>
          <p>For FFmpeg basics, check out the program's <a href="https://www.ffmpeg.org/">official website.</a></p>
          <p>For Bash and command line basics, try the <a href="http://cli.learncodethehardway.org/book/">Command Line Crash Course</a></p>
      </div>

      <div class="well col-md-6 col-md-offset-2">
          <h3>What do you want to do?</h3>
          <h5>Select from the following.</h5>

<!-- sample example -->
<span data-toggle="modal" data-target=".example"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Displays information about a media file">Sample example</button></span>
<!-- Change the above data-target field, the button text, and the below div class (the word after modal fade) -->
<div class="modal fade example" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- where the text goes -->
      <div class="well">
        <h3>Sample example</h3>

        <p>
          <code>ffmpeg -i [sample file path]</code>
        </p>

        <p>This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! </p>

        <ul>
          <li>ffmpeg : starts the command</li>
          <li>-i : i for info dudes!</li>
          <li>[sample file path] : path to sample file</li>
        </ul>

      </div>
    </div>
  </div>
</div>
<!-- ends sample example -->


<!-- WAV to MP3 -->
<span data-toggle="modal" data-target=".wav_to_mp3"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Converts WAV to MP3">WAV to MP3</button></span>
<div class="modal fade wav_to_mp3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- where the text goes -->
      <div class="well">
        <h3>WAV to MP3</h3>

        <p>
          <code>ffmpeg -i [inputfile.wav] -sample_fmt s16p -ar 44100 [outputfile.mp3]</code>
        </p>

        <p>This will convert your wav files to mp3s.</p>

        <ul>
          <li>ffmpeg : starts the command</li>
          <li>-i for input</li>
          <li>[inputfile.wav] : file you would like to convert to mp3</li>
          <li>-sample_fmt s16p: sample format. This will give you 16 bit audio (To see a list of supported sample formats, type:  ffmpeg -sample_fmts)</li>
          <li>-ar 44100 : audio sampling frequency</li>
          <li>[outputfile.mp3] : outputname and format</li>
        </ul>

      </div>
    </div>
  </div>
</div>
<!-- ends WAV to MP3 -->


<!-- batch processing -->
<span data-toggle="modal" data-target=".batch_processing"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="FFMPEG batch processing within a single folder">Batch processing</button></span>
<div class="modal fade batch_processing" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- where the text goes -->
      <div class="well">
        <h3>Create Bash Script named “Rewrap.MXF.sh” to do Batch FFMPEG Processing</h3>

        <p>
          <code>for f in *.MXF; do ffmpeg -i "$f" -acodec copy -vcodec copy "${f%.MXF}.mov"; done</code>
        </p>

        <p>Re-wrap .MFX files in a specified directory to .mov files by using this code within a .sh file. The shell script (.sh file) and all MXF files must be contained in the same directory, and the script must be run from the directory itself (cd ~/Desktop/MXF_file_directory). Execute .sh file with the command <code>sh Rewrap-MXF.sh</code></p>
        
        <ul>
          <li>-acodec copy (copy audio codec)</li>
          <li>-vcodec copy (copy video codec)</li>
        </ul>

        <p>Modify the ffmpeg script as needed to perform different transcodes :)</p>
      </div>
    </div>
  </div>
</div>
<!-- ends batch processing -->


<!-- Create frame md5s -->
<span data-toggle="modal" data-target=".create_frame_md5s"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="This will create an md5 checksum per frame">Create frame md5s</button></span>
<div class="modal fade create_frame_md5s" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- where the text goes -->
      <div class="well">
        <h3>Create frame md5s</h3>

        <p>
          <code>ffmpeg -i [inputfile.extension] -an -f framemd5 [outputfile.framemd5]</code>
        </p>

        <p>This will create an md5 checksum per frame</p>
        
        <ul>
          <li>ffmpeg: starts the command</li>
          <li>-i for input</li>
          <li>[inputfile.extension]: the file you want to create framemd5 checksums for</li>
          <li>-an: ignores the audio track</li>
          <li>-f framemed5: file type</li>
          <li>[outputfile.framemd5]: output name and format</li>
        </ul>

      </div>
    </div>
  </div>
</div>
<!-- ends Create frame md5s -->

<!-- One thumbnail -->
<span data-toggle="modal" data-target=".one_thumbnail"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Export one thumbnail per video file">One thumbnail</button></span>

<div class="modal fade one_thumbnail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="well">
        <h3>One thumbnail</h3>

        <p>
          <code>ffmpeg -i [file path] -ss 00:00:20 -f image2 -vframes 1 thumb.png
          </code></p>

        <p>This command will grab a thumbnail 20 seconds into the video.</p>

        <ul>
          <li>ffmpeg: calls the program</li>
          <li>-i for input</li>
          <li>-ss 00:00:20: seeks video file to 20 seconds into the video </li>
          <li>-f image2: Forces the file format. image2 is an image file demuxer.</li>
          <li>-vframes 1: sets the number of frames (in this example, one frame)</li>
          <li>thumb.png: output name and format</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- ends One thumbnail -->

<!-- Multi thumbnail -->
<span data-toggle="modal" data-target=".multi_thumbnail"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Export many thumbnails per video file">Many thumbnails</button></span>

<div class="modal fade multi_thumbnail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- where the text goes -->
      <div class="well">
      <h3>Many thumbnails</h3>
        <p>
          <code>ffmpeg -i {path/inputfile.extension} -f image2 -vf fps=fps=1/60 out%d.png
          </code>
        </p>

        <p>This will grab a thumbnail every minute and output sequential png files.</p>

        <ul>
          <li>ffmpeg: calls the program</li>
          <li>-i for input</li>
          <li>-ss 00:00:20: seeks video file to 20 seconds into the video</li>
          <li>-f image2: Forces the file format. image2 is an image file demuxer</li>
          <li>-vf fps=fps=1/60: -vf is an alias for -filter:v, which creates a filtergraph to use for the streams. The rest of the command identifies filtering by frames per second, and sets the frames per second at 1/60 (which is one per minute).</li>
          <li>out%d.png: Names the output file. The %d is a regular expression that adds a number (d is for digit) and increments with each frame (out1.png, out2.png, out3.png…)</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- ends Multi thumbnail -->

<!-- Pull specs -->
<span data-toggle="modal" data-target=".pull_specs"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Pull specs from video file">Pull specs</button></span>

<div class="modal fade pull_specs" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- where the text goes -->
      <div class="well">
        <h3>Pull specs from video file</h3>
        <p><code>ffprobe -i filename.avi -show_format -show_streams -print_format xml</code></p>

        <p>This command extracts technical metadata from a video file and displays it in xml. </p>
        <p>ffmpeg documentation on ffprobe (full list of flags, commands, <a href="https://www.ffmpeg.org/ffprobe.html">https://www.ffmpeg.org/ffprobe.html</a>) </p>

        <ul>
          <li>ffprobe: calls the program</li>
          <li>-i:  tells ffprobe to expect input files</li>
          <li>-show_format: outputs file container</li>
          <li>-show_streams: outputs audio and video codec</li>
          <li>-show_data: adds “hexdump” to show_streams command output</li>
          <li>-print_format: Set the output printing format (in this example “xml”)</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- ends Pull specs -->

<!-- Join files together -->
<span data-toggle="modal" data-target=".join_files"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Join (concatenate) two or more files into a single file">Join files together</button></span>

<div class="modal fade join_files" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- where the text goes -->
      <div class="well">
        <h3>Join files together</h3>
        <p><code>ffmpeg -f concat -i mylist.txt -c copy [output] </code></p>

        <p>This command takes two or more files of the same file type and joins them together to make a single file. All that the program needs is a text file with a list specifying the files that should be joined.  However, it only works properly if the files to be combined have the exact same codec and technical specifications. Be careful, ffmpeg may appear to have successfully joined two video files with different codecs, but may only bring over the audio from the second file or have other weird behaviors. Don’t use this command for joining files with different codecs and technical specs and always preview your resulting video file!
</p>
        <p>ffmpeg documentation on concatenating files (full list of flags, commands, <a href="https://trac.ffmpeg.org/wiki/Concatenate">https://trac.ffmpeg.org/wiki/Concatenate</a>) </p>

        <ul>
         <li>ffmpeg: calls the program</li>
         <li>-f: forces ffmpeg to keep the same file format of the joined files</li>
         <li>concat: ffmpeg’s concatenate command. This tells ffmpeg to join the files.</li>
         <li>-i: tells ffmpeg to expect input files</li>
         <li>mylist.txt: specifies the location of a text file with a list of files to be concatenated. You should create a text file that is formatted as follows:</li>
            <ul>
              <li>file [path to file 1]</li>
              <li>file [path to file 2]</li>
            </ul>
         <li>-c copy: specifies the encoder for the output file by telling ffmpeg to copy the codecs of the original files and use them for the output file</li>
         <li>[output]: specifies the filename and location for the output file</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- ends Join files together -->


</div> <!-- end this well (and this ends well) -->
</div> <!-- row -->


    <div class="footer text-center">
      <p>Made with ♥ at <a href="http://wiki.curatecamp.org/index.php/Association_of_Moving_Image_Archivists_%26_Digital_Library_Federation_Hack_Day_2015">AMIA #AVhack15</a></p>
    </div>
  </body>
</html>
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
+								<!DOCTYPE html>
 								<html>
 								  <head>
 								    <title>ffmprovisr</title>
 								    <meta charset="utf-8">
 								    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
 								    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
-												aesthetics

											
										
										
											2015-03-20 22:33:41 -04:00
+								    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
 								    <link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'>
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
+								    <link rel="stylesheet" href="css/bootstrap.min.css">
-												spacing please

											
										
										
											2015-03-20 21:05:44 -04:00
+								    <link rel="stylesheet" href="css/css.css">
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
+								    <link href="css/jquery.steps.css" rel="stylesheet" >
 								    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-												ability to add explanatory tooltip on hover

											
										
										
											2015-11-18 14:55:29 -08:00
+								    <script src="js/js.js"></script>
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
+								    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 								  </head>
 								  <div class="container">
 								  <div class="text-center">
 								    <h1>➺ ffmprovisr ❥</h1>
 								    <br/>
 								  </div>
-												text

											
										
										
											2015-03-20 20:53:24 -04:00
+								<!-- BUTTONS! -->
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
+								<div class="row">
-												a chill scroll

											
										
										
											2015-03-21 00:15:06 -04:00
+								       <div class="well col-md-3 col-md-offset-0">
-												a balancing act

											
										
										
											2015-03-20 21:14:04 -04:00
+								        <br>
-												Adjusted intro text and concatenate description
											
										
										
											2015-11-18 19:30:11 -05:00
+								          <h5>Making FFmpeg Easier</h5>
 								          <p>FFmpeg is a powerful tool for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with a command line interface. This app helps users through the command generation process so that more people can reap the benefits of the FFmpeg. </p>
 								          <p>This project is very much a work in progress. Each button displays helpful information about how to perform a wide variety of tasks using FFmpeg. To use this site, click on the task you would like to perform. A new window will open up with a sample command and a description of how that command works. You can copy this command, and after specifying an [input] and possibly an [output], you can then use this command in a Terminal.</p>
 								          <p>For FFmpeg basics, check out the program's <a href="https://www.ffmpeg.org/">official website.</a></p>
 								          <p>For Bash and command line basics, try the <a href="http://cli.learncodethehardway.org/book/">Command Line Crash Course</a></p>
-												aesthetics

											
										
										
											2015-03-20 22:33:41 -04:00
+								      </div>
-												a chill scroll

											
										
										
											2015-03-21 00:15:06 -04:00
+								      <div class="well col-md-6 col-md-offset-2">
-												aesthetics

											
										
										
											2015-03-20 22:33:41 -04:00
+								          <h3>What do you want to do?</h3>
 								          <h5>Select from the following.</h5>
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
-												sample example

											
										
										
											2015-11-18 10:39:56 -08:00
+								<!-- sample example -->
-												sample example activate

											
										
										
											2015-11-18 14:42:33 -08:00
+								<span data-toggle="modal" data-target=".example"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Displays information about a media file">Sample example</button></span>
-												comments

											
										
										
											2015-11-18 13:53:51 -08:00
+								<!-- Change the above data-target field, the button text, and the below div class (the word after modal fade) -->
-												refactor

											
										
										
											2015-11-18 12:00:17 -08:00
+								<div class="modal fade example" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 								  <div class="modal-dialog modal-lg">
 								    <div class="modal-content">
 								      <!-- where the text goes -->
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
+								      <div class="well">
-												fixing things

											
										
										
											2015-11-18 15:14:37 -08:00
+								        <h3>Sample example</h3>
 								        <p>
 								          <code>ffmpeg -i [sample file path]</code>
 								        </p>
-												converts wav to mp3

											
										
										
											2015-11-18 15:39:08 -08:00
 								        <p>This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! </p>
-												add nicoles bash script

											
										
										
											2015-11-18 15:55:53 -08:00
-												sample example

											
										
										
											2015-11-18 10:39:56 -08:00
+								        <ul>
-												attribution rules

											
										
										
											2015-11-18 10:52:01 -08:00
+								          <li>ffmpeg : starts the command</li>
 								          <li>-i : i for info dudes!</li>
 								          <li>[sample file path] : path to sample file</li>
-												sample example

											
										
										
											2015-11-18 10:39:56 -08:00
+								        </ul>
-												fixing things

											
										
										
											2015-11-18 15:14:37 -08:00
-												two new commands

											
										
										
											2015-03-22 14:54:44 -04:00
+								      </div>
 								    </div>
-												refactor

											
										
										
											2015-11-18 12:00:17 -08:00
+								  </div>
 								</div>
-												careful commenting

											
										
										
											2015-11-18 11:30:34 -08:00
+								<!-- ends sample example -->
-												two new commands

											
										
										
											2015-03-22 14:54:44 -04:00
-												converts wav to mp3

											
										
										
											2015-11-18 15:39:08 -08:00
 								<!-- WAV to MP3 -->
 								<span data-toggle="modal" data-target=".wav_to_mp3"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Converts WAV to MP3">WAV to MP3</button></span>
 								<div class="modal fade wav_to_mp3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 								  <div class="modal-dialog modal-lg">
 								    <div class="modal-content">
 								      <!-- where the text goes -->
 								      <div class="well">
 								        <h3>WAV to MP3</h3>
 								        <p>
 								          <code>ffmpeg -i [inputfile.wav] -sample_fmt s16p -ar 44100 [outputfile.mp3]</code>
 								        </p>
 								        <p>This will convert your wav files to mp3s.</p>
 								        <ul>
 								          <li>ffmpeg : starts the command</li>
 								          <li>-i for input</li>
 								          <li>[inputfile.wav] : file you would like to convert to mp3</li>
 								          <li>-sample_fmt s16p: sample format. This will give you 16 bit audio (To see a list of supported sample formats, type:  ffmpeg -sample_fmts)</li>
 								          <li>-ar 44100 : audio sampling frequency</li>
 								          <li>[outputfile.mp3] : outputname and format</li>
 								        </ul>
 								      </div>
 								    </div>
 								  </div>
 								</div>
 								<!-- ends WAV to MP3 -->
-												add nicoles bash script

											
										
										
											2015-11-18 15:55:53 -08:00
+								<!-- batch processing -->
 								<span data-toggle="modal" data-target=".batch_processing"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="FFMPEG batch processing within a single folder">Batch processing</button></span>
 								<div class="modal fade batch_processing" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 								  <div class="modal-dialog modal-lg">
 								    <div class="modal-content">
 								      <!-- where the text goes -->
 								      <div class="well">
-												create frame md5s and adjust

											
										
										
											2015-11-18 16:02:43 -08:00
+								        <h3>Create Bash Script named “Rewrap.MXF.sh” to do Batch FFMPEG Processing</h3>
-												add nicoles bash script

											
										
										
											2015-11-18 15:55:53 -08:00
 								        <p>
-												create frame md5s and adjust

											
										
										
											2015-11-18 16:02:43 -08:00
+								          <code>for f in *.MXF; do ffmpeg -i "$f" -acodec copy -vcodec copy "${f%.MXF}.mov"; done</code>
-												add nicoles bash script

											
										
										
											2015-11-18 15:55:53 -08:00
+								        </p>
 								        <p>Re-wrap .MFX files in a specified directory to .mov files by using this code within a .sh file. The shell script (.sh file) and all MXF files must be contained in the same directory, and the script must be run from the directory itself (cd ~/Desktop/MXF_file_directory). Execute .sh file with the command <code>sh Rewrap-MXF.sh</code></p>
 								        <ul>
 								          <li>-acodec copy (copy audio codec)</li>
 								          <li>-vcodec copy (copy video codec)</li>
 								        </ul>
 								        <p>Modify the ffmpeg script as needed to perform different transcodes :)</p>
 								      </div>
 								    </div>
 								  </div>
 								</div>
 								<!-- ends batch processing -->
-												create frame md5s and adjust

											
										
										
											2015-11-18 16:02:43 -08:00
+								<!-- Create frame md5s -->
 								<span data-toggle="modal" data-target=".create_frame_md5s"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="This will create an md5 checksum per frame">Create frame md5s</button></span>
 								<div class="modal fade create_frame_md5s" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 								  <div class="modal-dialog modal-lg">
 								    <div class="modal-content">
 								      <!-- where the text goes -->
 								      <div class="well">
 								        <h3>Create frame md5s</h3>
 								        <p>
 								          <code>ffmpeg -i [inputfile.extension] -an -f framemd5 [outputfile.framemd5]</code>
 								        </p>
 								        <p>This will create an md5 checksum per frame</p>
 								        <ul>
 								          <li>ffmpeg: starts the command</li>
 								          <li>-i for input</li>
 								          <li>[inputfile.extension]: the file you want to create framemd5 checksums for</li>
 								          <li>-an: ignores the audio track</li>
 								          <li>-f framemed5: file type</li>
 								          <li>[outputfile.framemd5]: output name and format</li>
 								        </ul>
 								      </div>
 								    </div>
 								  </div>
 								</div>
 								<!-- ends Create frame md5s -->
-												refactor

											
										
										
											2015-11-18 12:00:17 -08:00
+								<!-- One thumbnail -->
-												updates example and wraps all in tooltip

											
										
										
											2015-11-18 14:58:20 -08:00
+								<span data-toggle="modal" data-target=".one_thumbnail"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Export one thumbnail per video file">One thumbnail</button></span>
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
-												refactor

											
										
										
											2015-11-18 12:00:17 -08:00
+								<div class="modal fade one_thumbnail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 								  <div class="modal-dialog modal-lg">
 								    <div class="modal-content">
-												yeah totally obtuse way time to refactor

											
										
										
											2015-11-18 11:48:17 -08:00
+								      <div class="well">
-												fixing things

											
										
										
											2015-11-18 15:14:37 -08:00
+								        <h3>One thumbnail</h3>
 								        <p>
 								          <code>ffmpeg -i [file path] -ss 00:00:20 -f image2 -vframes 1 thumb.png
 								          </code></p>
-												yeah totally obtuse way time to refactor

											
										
										
											2015-11-18 11:48:17 -08:00
-												updates example and wraps all in tooltip

											
										
										
											2015-11-18 14:58:20 -08:00
+								        <p>This command will grab a thumbnail 20 seconds into the video.</p>
-												yeah totally obtuse way time to refactor

											
										
										
											2015-11-18 11:48:17 -08:00
 								        <ul>
 								          <li>ffmpeg: calls the program</li>
 								          <li>-i for input</li>
 								          <li>-ss 00:00:20: seeks video file to 20 seconds into the video </li>
 								          <li>-f image2: Forces the file format. image2 is an image file demuxer.</li>
 								          <li>-vframes 1: sets the number of frames (in this example, one frame)</li>
 								          <li>thumb.png: output name and format</li>
 								        </ul>
 								      </div>
 								    </div>
-												refactor

											
										
										
											2015-11-18 12:00:17 -08:00
+								  </div>
 								</div>
 								<!-- ends One thumbnail -->
-												careful commenting

											
										
										
											2015-11-18 11:30:34 -08:00
-												adds thumbnail

											
										
										
											2015-11-18 13:46:46 -08:00
+								<!-- Multi thumbnail -->
-												updates example and wraps all in tooltip

											
										
										
											2015-11-18 14:58:20 -08:00
+								<span data-toggle="modal" data-target=".multi_thumbnail"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Export many thumbnails per video file">Many thumbnails</button></span>
-												adds thumbnail

											
										
										
											2015-11-18 13:46:46 -08:00
 								<div class="modal fade multi_thumbnail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 								  <div class="modal-dialog modal-lg">
 								    <div class="modal-content">
 								      <!-- where the text goes -->
 								      <div class="well">
-												new style

											
										
										
											2015-11-18 15:09:37 -08:00
+								      <h3>Many thumbnails</h3>
 								        <p>
 								          <code>ffmpeg -i {path/inputfile.extension} -f image2 -vf fps=fps=1/60 out%d.png
 								          </code>
 								        </p>
-												adds thumbnail

											
										
										
											2015-11-18 13:46:46 -08:00
 								        <p>This will grab a thumbnail every minute and output sequential png files.</p>
 								        <ul>
 								          <li>ffmpeg: calls the program</li>
 								          <li>-i for input</li>
 								          <li>-ss 00:00:20: seeks video file to 20 seconds into the video</li>
 								          <li>-f image2: Forces the file format. image2 is an image file demuxer</li>
 								          <li>-vf fps=fps=1/60: -vf is an alias for -filter:v, which creates a filtergraph to use for the streams. The rest of the command identifies filtering by frames per second, and sets the frames per second at 1/60 (which is one per minute).</li>
 								          <li>out%d.png: Names the output file. The %d is a regular expression that adds a number (d is for digit) and increments with each frame (out1.png, out2.png, out3.png…)</li>
 								        </ul>
 								      </div>
 								    </div>
 								  </div>
 								</div>
 								<!-- ends Multi thumbnail -->
-												careful commenting

											
										
										
											2015-11-18 11:30:34 -08:00
-												adds pull specs

											
										
										
											2015-11-18 14:49:57 -08:00
+								<!-- Pull specs -->
-												updates example and wraps all in tooltip

											
										
										
											2015-11-18 14:58:20 -08:00
+								<span data-toggle="modal" data-target=".pull_specs"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Pull specs from video file">Pull specs</button></span>
-												adds pull specs

											
										
										
											2015-11-18 14:49:57 -08:00
 								<div class="modal fade pull_specs" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 								  <div class="modal-dialog modal-lg">
 								    <div class="modal-content">
 								      <!-- where the text goes -->
 								      <div class="well">
-												Update index.html
											
										
										
											2015-11-18 18:21:48 -05:00
+								        <h3>Pull specs from video file</h3>
-												Update index.html
											
										
										
											2015-11-18 18:13:00 -05:00
+								        <p><code>ffprobe -i filename.avi -show_format -show_streams -print_format xml</code></p>
-												adds pull specs

											
										
										
											2015-11-18 14:49:57 -08:00
 								        <p>This command extracts technical metadata from a video file and displays it in xml. </p>
-												forgot was not working in markdown

											
										
										
											2015-11-18 14:51:59 -08:00
+								        <p>ffmpeg documentation on ffprobe (full list of flags, commands, <a href="https://www.ffmpeg.org/ffprobe.html">https://www.ffmpeg.org/ffprobe.html</a>) </p>
-												adds pull specs

											
										
										
											2015-11-18 14:49:57 -08:00
 								        <ul>
 								          <li>ffprobe: calls the program</li>
 								          <li>-i:  tells ffprobe to expect input files</li>
 								          <li>-show_format: outputs file container</li>
 								          <li>-show_streams: outputs audio and video codec</li>
 								          <li>-show_data: adds “hexdump” to show_streams command output</li>
 								          <li>-print_format: Set the output printing format (in this example “xml”)</li>
 								        </ul>
 								      </div>
 								    </div>
 								  </div>
 								</div>
 								<!-- ends Pull specs -->
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
+								<!-- Join files together -->
-												Adjusted intro text and concatenate description
											
										
										
											2015-11-18 19:30:11 -05:00
+								<span data-toggle="modal" data-target=".join_files"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Join (concatenate) two or more files into a single file">Join files together</button></span>
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
-												cool refactoring

											
										
										
											2015-11-18 15:16:53 -08:00
+								<div class="modal fade join_files" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
+								  <div class="modal-dialog modal-lg">
 								    <div class="modal-content">
 								      <!-- where the text goes -->
 								      <div class="well">
-												Update index.html
											
										
										
											2015-11-18 18:21:48 -05:00
+								        <h3>Join files together</h3>
 								        <p><code>ffmpeg -f concat -i mylist.txt -c copy [output] </code></p>
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
-												Adjusted intro text and concatenate description
											
										
										
											2015-11-18 19:30:11 -05:00
+								        <p>This command takes two or more files of the same file type and joins them together to make a single file. All that the program needs is a text file with a list specifying the files that should be joined.  However, it only works properly if the files to be combined have the exact same codec and technical specifications. Be careful, ffmpeg may appear to have successfully joined two video files with different codecs, but may only bring over the audio from the second file or have other weird behaviors. Don’t use this command for joining files with different codecs and technical specs and always preview your resulting video file!
 								</p>
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
+								        <p>ffmpeg documentation on concatenating files (full list of flags, commands, <a href="https://trac.ffmpeg.org/wiki/Concatenate">https://trac.ffmpeg.org/wiki/Concatenate</a>) </p>
 								        <ul>
 								         <li>ffmpeg: calls the program</li>
-												Adjusted intro text and concatenate description
											
										
										
											2015-11-18 19:30:11 -05:00
+								         <li>-f: forces ffmpeg to keep the same file format of the joined files</li>
 								         <li>concat: ffmpeg’s concatenate command. This tells ffmpeg to join the files.</li>
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
+								         <li>-i: tells ffmpeg to expect input files</li>
-												Adjusted intro text and concatenate description
											
										
										
											2015-11-18 19:30:11 -05:00
+								         <li>mylist.txt: specifies the location of a text file with a list of files to be concatenated. You should create a text file that is formatted as follows:</li>
-												lists

											
										
										
											2015-11-18 15:25:55 -08:00
+								            <ul>
-												merge

											
										
										
											2015-11-18 15:26:38 -08:00
+								              <li>file [path to file 1]</li>
 								              <li>file [path to file 2]</li>
-												lists

											
										
										
											2015-11-18 15:25:55 -08:00
+								            </ul>
-												Adjusted intro text and concatenate description
											
										
										
											2015-11-18 19:30:11 -05:00
+								         <li>-c copy: specifies the encoder for the output file by telling ffmpeg to copy the codecs of the original files and use them for the output file</li>
 								         <li>[output]: specifies the filename and location for the output file</li>
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
+								        </ul>
 								      </div>
 								    </div>
 								  </div>
 								</div>
-												Update index.html
											
										
										
											2015-11-18 18:05:05 -05:00
+								<!-- ends Join files together -->
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
-												lists

											
										
										
											2015-11-18 15:25:55 -08:00
-												refactor

											
										
										
											2015-11-18 12:00:17 -08:00
+								</div> <!-- end this well (and this ends well) -->
 								</div> <!-- row -->
-												careful commenting

											
										
										
											2015-11-18 11:30:34 -08:00
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
-												a chill scroll

											
										
										
											2015-03-21 00:15:06 -04:00
+								    <div class="footer text-center">
-												attribution rules

											
										
										
											2015-11-18 10:52:01 -08:00
+								      <p>Made with ♥ at <a href="http://wiki.curatecamp.org/index.php/Association_of_Moving_Image_Archivists_%26_Digital_Library_Federation_Hack_Day_2015">AMIA #AVhack15</a></p>
-												refactor to one page

											
										
										
											2015-03-20 20:32:55 -04:00
+								    </div>
 								  </body>
-												Update index.html
											
										
										
											2015-11-18 18:04:06 -05:00
+								</html>