ffmprovisr/index.html
2015-11-18 12:03:47 -08:00

108 lines
4.7 KiB
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/forms.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 -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target=".example">Sample example</button>
<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 -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target=".one_thumbnail">One thumbnail</button>
<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 first 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 -->
</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>