mirror of
https://github.com/amiaopensource/ffmprovisr.git
synced 2024-11-06 21:47:24 +01:00
405 lines
16 KiB
HTML
405 lines
16 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>
|
|
<span id="show_display_info"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Displays information about a media file">Display Info</button></span>
|
|
|
|
<span id="show_add_subtitles"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Attaches a subtitle track to a media file">Add subtitles</button></span>
|
|
|
|
<span id="show_remove_audio_track"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Removes the audio track from a media file">Remove audio</button></span>
|
|
|
|
<span id="show_add_audio_track"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Adds (replaces) a video file's audio track">Add audio track</button></span>
|
|
|
|
<span id="show_webm_for_web"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Export to compressed webm file for web use">Export to webm for web</button></span>
|
|
|
|
<span id="show_h264_for_web"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Export to compressed h264 file for web use">Export to h264 for web</button></span>
|
|
|
|
<span id="show_img_to_vid"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="This command will transform all the images from the current directory (named image1.jpg, image2.jpg, etc) to a video file named video.mpg">Convert images to video</button></span>
|
|
|
|
<span id="show_vid_to_img"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Export to compressed h264 file for web use">Convert video to images</button></span>
|
|
</div>
|
|
|
|
|
|
</div> <!-- row -->
|
|
|
|
<!-- FORMS!-->
|
|
<div id="formloader">
|
|
<div class="display_info" style="display:none;">
|
|
<div id="file_names">
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Input</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="input_name">Input</label>
|
|
<div class="controls">
|
|
<input type="text" name="input_name" id="input_name" placeholder="input" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<input type="button" class="btn btn-large btn-primary" name="display_generate" id="display_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="display_command_line" id="display_command_line" rows="1" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="web" style="display:none;">
|
|
<div id="file_names">
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Input and Output</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="input_name">Input</label>
|
|
<div class="controls">
|
|
<input type="text" name="input_name" id="input_name" placeholder="input" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label" for="output_name">Output</label>
|
|
<div class="controls">
|
|
<input type="text" name="output_name" id="output_name" placeholder="output" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<input type="button" class="btn btn-large btn-primary" name="generate" id="web_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="command_line" id="command_line" rows="3" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="add_subtitles" style="display:none;">
|
|
<div id="file_names">
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Input</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="subtitles_input_name">Input</label>
|
|
<div class="controls">
|
|
<input type="text" name="subtitles_input_name" id="subtitles_input_name" placeholder="input" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Subtitles file (.srt)</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="subtitles_name">Subtitles</label>
|
|
<div class="controls">
|
|
<input type="text" name="subtitles_name" id="subtitles_name" placeholder="subtitles" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Output</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="subtitles_output_name">Output</label>
|
|
<div class="controls">
|
|
<input type="text" name="subtitles_output_name" id="subtitles_output_name" placeholder="output" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<br/>
|
|
<fieldset>
|
|
<input type="button" class="btn btn-large btn-primary" name="add_subtitles_generate" id="add_subtitles_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="subtitles_command_line" id="subtitles_command_line" rows="3" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="remove_audio_track" style="display:none;">
|
|
<div id="file_names">
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Input</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="r_audio_input_name">Input</label>
|
|
<div class="controls">
|
|
<input type="text" name="r_audio_input_name" id="r_audio_input_name" placeholder="input" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Audio track</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="r_audio_track_name">Audio track</label>
|
|
<div class="controls">
|
|
<input type="text" name="r_audio_track_name" id="r_audio_track_name" placeholder="subtitles" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Output</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="r_audio_output_name">Output</label>
|
|
<div class="controls">
|
|
<input type="text" name="r_audio_output_name" id="r_audio_output_name" placeholder="output" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<br/>
|
|
<fieldset>
|
|
<input type="button" class="btn btn-large btn-primary" name="remove_subtitles_generate" id="remove_audio_track_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="remove_audio_track_command_line" id="remove_audio_track_command_line" rows="3" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="webm_for_web" style="display:none;">
|
|
<div id="file_names">
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Input and Output</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="webm_input_name">Input</label>
|
|
<div class="controls">
|
|
<input type="text" name="webm_input_name" id="webm_input_name" placeholder="input" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label" for="webm_output_name">Output</label>
|
|
<div class="controls">
|
|
<input type="text" name="webm_output_name" id="webm_output_name" placeholder="output" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<input type="button" class="btn btn-large btn-primary" name="generate" id="webm_for_web_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="webm_for_web_command_line" id="webm_for_web_command_line" rows="3" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- h264 for web -->
|
|
<div class="h264_for_web" style="display:none;">
|
|
<div id="file_names">
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Input and Output</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="h264_input_name">Input</label>
|
|
<div class="controls">
|
|
<input type="text" name="h264_input_name" id="h264_input_name" placeholder="input" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label" for="h264_output_name">Output</label>
|
|
<div class="controls">
|
|
<input type="text" name="h264_output_name" id="h264_output_name" placeholder="output" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<input type="button" class="btn btn-large btn-primary" name="generate" id="h264_for_web_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="h264_for_web_command_line" id="h264_for_web_command_line" rows="3" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add audio track -->
|
|
<div class="add_audio_track" style="display:none;">
|
|
<div id="file_names">
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Input</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="audio_input_name">Input</label>
|
|
<div class="controls">
|
|
<input type="text" name="audio_input_name" id="audio_input_name" placeholder="input" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Audio track</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="audio_track_name">Audio track</label>
|
|
<div class="controls">
|
|
<input type="text" name="audio_track_name" id="audio_track_name" placeholder="audio.mp3" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Output</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="audio_output_name">Output</label>
|
|
<div class="controls">
|
|
<input type="text" name="audio_output_name" id="audio_output_name" placeholder="output" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<br/>
|
|
<fieldset>
|
|
<input type="button" class="btn btn-large btn-primary" name="add_subtitles_generate" id="add_audio_track_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="add_audio_track_command_line" id="add_audio_track_command_line" rows="3" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- img to vid -->
|
|
<div class="img_to_vid" style="display:none;">
|
|
<div id="file_names">
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Input and Output</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="img_output_name">Output</label>
|
|
<div class="controls">
|
|
<input type="text" name="img_output_name" id="img_output_name" placeholder="video.mpg" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<input type="button" class="btn btn-large btn-primary" name="generate" id="img_to_vid_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="img_to_vid_command_line" id="img_to_vid_command_line" rows="3" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- vid to img -->
|
|
<div class="vid_to_img" style="display:none;">
|
|
<div id="file_names">
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Output</legend>
|
|
<div class="form-group">
|
|
<label class="control-label" for="vid_output_name">Output</label>
|
|
<div class="controls">
|
|
<input type="text" name="vid_output_name" id="vid_output_name" placeholder="video.mpg" />
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<input type="button" class="btn btn-large btn-primary" name="generate" id="vid_to_img_generate" value="Generate" />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="well">
|
|
<fieldset>
|
|
<legend>Your command line:</legend>
|
|
<textarea name="vid_to_img_command_line" id="vid_to_img_command_line" rows="3" cols="100"></textarea>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div> <!-- container -->
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="reload">
|
|
<p><button type="button" class="btn btn-default">Start over!</button></p>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- container -->
|
|
|
|
|
|
<div class="footer text-center">
|
|
<p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
|
|
</div>
|
|
</body>
|
|
</html> |