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 framework for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with the command line. This app helps users through the bash command generation process so that more people can reap the benefits of the FFmpeg library. </p>
          <p>This project is very much a work in progress. Each button displays a form to help fulfill a popular user request. To use, click on the button and fill out the form. After clicking the Generate button, a command line will appear in the box below. That line can be copied and pasted into a Terminal, with the assumption that the video file is located in the same directory that the user currently is in.</p>
          <p>For FFmpeg basics, check out their <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">
        <h2>ffmpeg -i [sample file path]</h2>
      </div>
      <div class="well">
        <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 class="well">
        <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>
      </div>
    </div>
  </div>
</div>
<!-- ends sample example -->

<!-- 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">
      <!-- where the text goes -->
      <div class="well">
        <h2>ffmpeg -i [file path] -ss 00:00:20 -f image2 -vframes 1 thumb.png</h2>
      </div>

      <div class="well">
        <p>This command will grab a thumbnail 20 seconds into the video.</p>
      </div>

      <div class="well">
        <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">
        <h2>ffmpeg -i {path/inputfile.extension} -f image2 -vf fps=fps=1/60 out%d.png</h2>
      </div>

      <div class="well">
        <p>This will grab a thumbnail every minute and output sequential png files.</p>
      </div>

      <div class="well">
        <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">
        <h2>ffprobe -i filename.avi -show_format -show_streams -print_format xml</h2>
      </div>

      <div class="well">
        <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>
      </div>

      <div class="well">
        <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 -->

</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-21 01:32:55 +01: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-21 03:33:41 +01: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-21 01:32:55 +01:00			`<link rel="stylesheet" href="css/bootstrap.min.css">`
spacing please 2015-03-21 02:05:44 +01:00			`<link rel="stylesheet" href="css/css.css">`
refactor to one page 2015-03-21 01:32:55 +01: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 23:55:29 +01:00			`<script src="js/js.js"></script>`
refactor to one page 2015-03-21 01:32:55 +01: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-21 01:53:24 +01:00			`<!-- BUTTONS! -->`
refactor to one page 2015-03-21 01:32:55 +01:00			`<div class="row">`

a chill scroll 2015-03-21 05:15:06 +01:00			`<div class="well col-md-3 col-md-offset-0">`
a balancing act 2015-03-21 02:14:04 +01:00			`<br>`
a chill scroll 2015-03-21 05:15:06 +01:00			`<h5>Making FFmpeg easier</h5>`
aesthetics 2015-03-21 03:33:41 +01:00			`<p>FFmpeg is a powerful framework for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with the command line. This app helps users through the bash command generation process so that more people can reap the benefits of the FFmpeg library. </p>`
			`<p>This project is very much a work in progress. Each button displays a form to help fulfill a popular user request. To use, click on the button and fill out the form. After clicking the Generate button, a command line will appear in the box below. That line can be copied and pasted into a Terminal, with the assumption that the video file is located in the same directory that the user currently is in.</p>`
			`<p>For FFmpeg basics, check out their <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>`

a chill scroll 2015-03-21 05:15:06 +01:00			`<div class="well col-md-6 col-md-offset-2">`
aesthetics 2015-03-21 03:33:41 +01:00			`<h3>What do you want to do?</h3>`
			`<h5>Select from the following.</h5>`
refactor to one page 2015-03-21 01:32:55 +01:00
sample example 2015-11-18 19:39:56 +01:00			`<!-- sample example -->`
sample example activate 2015-11-18 23:42:33 +01: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 22:53:51 +01:00			`<!-- Change the above data-target field, the button text, and the below div class (the word after modal fade) -->`
refactor 2015-11-18 21:00:17 +01: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-21 01:32:55 +01:00			`<div class="well">`
sample example 2015-11-18 19:39:56 +01:00			`<h2>ffmpeg -i [sample file path]</h2>`
two new commands 2015-03-22 19:54:44 +01:00			`</div>`
			`<div class="well">`
sample example 2015-11-18 19:39:56 +01:00			`<ul>`
attribution rules 2015-11-18 19:52:01 +01: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 19:39:56 +01:00			`</ul>`
two new commands 2015-03-22 19:54:44 +01:00			`</div>`
			`<div class="well">`
sample example 2015-11-18 19:39:56 +01: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>`
two new commands 2015-03-22 19:54:44 +01:00			`</div>`
			`</div>`
refactor 2015-11-18 21:00:17 +01:00			`</div>`
			`</div>`
careful commenting 2015-11-18 20:30:34 +01:00			`<!-- ends sample example -->`
two new commands 2015-03-22 19:54:44 +01:00
refactor 2015-11-18 21:00:17 +01:00			`<!-- One thumbnail -->`
updates example and wraps all in tooltip 2015-11-18 23:58:20 +01: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-21 01:32:55 +01:00
refactor 2015-11-18 21:00:17 +01:00			`<div class="modal fade one_thumbnail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">`
			`<div class="modal-dialog modal-lg">`
			`<div class="modal-content">`
			`<!-- where the text goes -->`
yeah totally obtuse way time to refactor 2015-11-18 20:48:17 +01:00			`<div class="well">`
			`<h2>ffmpeg -i [file path] -ss 00:00:20 -f image2 -vframes 1 thumb.png</h2>`
			`</div>`

			`<div class="well">`
updates example and wraps all in tooltip 2015-11-18 23:58:20 +01:00			`<p>This command will grab a thumbnail 20 seconds into the video.</p>`
yeah totally obtuse way time to refactor 2015-11-18 20:48:17 +01:00			`</div>`

			`<div class="well">`
			`<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 21:00:17 +01:00			`</div>`
			`</div>`
			`<!-- ends One thumbnail -->`
careful commenting 2015-11-18 20:30:34 +01:00
adds thumbnail 2015-11-18 22:46:46 +01:00			`<!-- Multi thumbnail -->`
updates example and wraps all in tooltip 2015-11-18 23:58:20 +01: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 22:46:46 +01: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">`
			`<h2>ffmpeg -i {path/inputfile.extension} -f image2 -vf fps=fps=1/60 out%d.png</h2>`
			`</div>`

			`<div class="well">`
			`<p>This will grab a thumbnail every minute and output sequential png files.</p>`
			`</div>`

			`<div class="well">`
			`<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 20:30:34 +01:00
adds pull specs 2015-11-18 23:49:57 +01:00			`<!-- Pull specs -->`
updates example and wraps all in tooltip 2015-11-18 23:58:20 +01: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 23:49:57 +01: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">`
			`<h2>ffprobe -i filename.avi -show_format -show_streams -print_format xml</h2>`
			`</div>`

			`<div class="well">`
			`<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 23:51:59 +01: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 23:49:57 +01:00			`</div>`

			`<div class="well">`
			`<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 -->`

refactor 2015-11-18 21:00:17 +01:00			`</div> <!-- end this well (and this ends well) -->`
			`</div> <!-- row -->`
careful commenting 2015-11-18 20:30:34 +01:00
refactor to one page 2015-03-21 01:32:55 +01:00

a chill scroll 2015-03-21 05:15:06 +01:00			`<div class="footer text-center">`
attribution rules 2015-11-18 19:52:01 +01: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-21 01:32:55 +01:00			`</div>`
			`</body>`
			`</html>`