Merge pull request #425 from amiaopensource/rm-jquery

Remove jQuery
Update lets as consts
2025-10-19 12:20:02 +02:00 · 2020-05-14 08:24:18 -04:00 · 2020-05-13 17:12:28 -04:00 · 2020-05-13 10:05:31 -04:00 · 2020-05-13 09:35:16 -04:00 · 2020-05-13 09:34:28 -04:00
5 changed files with 179 additions and 66 deletions
--- a/index.html
+++ b/index.html
@@ -2,11 +2,10 @@
 <html lang="en">
 <head>
  <title>ffmprovisr</title>
-  <meta name="viewport" charset="utf-8" content="text/html, width=device-width, initial-scale=1">
+  <meta name="viewport" content="text/html, width=device-width, initial-scale=1">
+  <meta charset="utf-8">
  <link rel="stylesheet" href="css/css.css">
  <link rel="icon" href="img/vhs.ico">
-  <script src="js/jquery.min.js"></script>
-  <script src="js/js.js"></script>
 </head>

 <body>
@@ -18,7 +17,7 @@
  <nav class="sidebar well">
    <h2 class="heading">Table of Contents</h2>
    <a href="#about"><div class="contents-list">About this resource</div></a>
-    <div id="open-all" class="contents-list">Show/hide all recipes</div>
+    <div id="toggle-expand-collapse-all" class="contents-list">Expand/collapse all recipes</div>
    <a href="#basics"><div class="contents-list">FFmpeg basics</div></a>
    <a href="#concepts"><div class="contents-list">Advanced FFmpeg concepts</div></a>
    <a href="#rewrap"><div class="contents-list">Change container (rewrap)</div></a>
@@ -124,6 +123,7 @@
        <li><code>.mxf</code>: Audio Codec: pcm_s16le, Video Codec: mpeg2video</li>
        <li><code>.wav</code>: Audio Codec: pcm_s16le (16 bit PCM)</li>
      </ul>
+      <p class="link"></p>
    </div>
    <!-- End Codec Defaults -->

@@ -218,6 +218,36 @@
    </div>
    <!-- End Basic rewrap command -->

+    <!-- BWF -->
+    <label class="recipe" for="bwf">Convert to (or create) Broadcast WAV</label>
+    <input type="checkbox" id="bwf">
+    <div class="hiding">
+      <h5>Generate Broadcast WAV</h5>
+      <p><code>ffmpeg -i <em>input_file.wav</em> -c copy -write_bext 1 -metadata field_name='Content' <em>output_file.wav</em></code></p>
+      <p>This command will write a file in the Broadcast Wave Format (BWF) containing a BEXT chunk with related metadata.</p>
+      <dl>
+        <dt>ffmpeg</dt><dd>starts the command</dd>
+        <dt>-i <em>input_file.wav</em></dt><dd>path and name of the input file</dd>
+        <dt>-c copy</dt><dd>this will copy the encoding/sample rate etc from the input. If not using a WAV as the input file you will have to specify codec settings in place of this.</dd>
+        <dt>-write_bext 1</dt><dd>tells FFmpeg to write a BEXT chunk, the part of the file where BWF metadata is stored.</dd>
+        <dt>-metadata field_name='Content'</dt><dd>This is where you can specify which BEXT fields to write, and what information to fill them with by replacing <code>field_name</code> and <code>'Content'</code> respectively. See below for additional details.</dd>
+      </dl>
+      <p>Notes: You can choose which fields to write by repeating <code>-metadata field_name='Content'</code> for each desired field. Flags for commonly used fields (such as those recommended by the <a href="http://www.digitizationguidelines.gov/audio-visual/documents/Embed_Guideline_20120423.pdf">FADGI guidelines</a>) are as follows:</p>
+      <ul>
+        <li>description</li>
+        <li>originator</li>
+        <li>originator_reference</li>
+        <li>origination_date</li>
+        <li>origination_time</li>
+        <li>coding_history</li>
+        <li>IARL</li>
+      </ul>
+      <p>Example: <code>-metadata originator='US, UW Libraries'</code></p>
+      <p>Additionally, users should be aware that BWF metadata fields are limited by characters, with some such as OriginatorReference maxing out at 32. Specific information can be found in the <a href="https://tech.ebu.ch/docs/tech/tech3285.pdf">Broadcast Wave Format specification</a>. Additional examples of BWF metadata usage can be found in the <a href="http://www.dlib.indiana.edu/projects/sounddirections/papersPresent/sd_bp_07.pdf">Sound Directions report</a> by Indiana University and Harvard.</p>
+      <p class="link"></p>
+    </div>
+    <!-- ends BWF -->
+
    <!-- Rewrap DV -->
    <label class="recipe" for="rewrap-dv">Rewrap DV video to .dv file</label>
    <input type="checkbox" id="rewrap-dv">
@@ -245,7 +275,7 @@
    <input type="checkbox" id="to_prores">
    <div class="hiding">
      <h5>Transcode into a deinterlaced Apple ProRes LT</h5>
-      <p><code>ffmpeg -i <em>input_file</em> -c:v prores -profile:v 1 -vf yadif -c:a pcm_s16le <em>output_file</em>.mov</code></p>
+      <p><code>ffmpeg -i <em>input_file</em> -c:v prores -profile:v 1 -vf yadif -c:a pcm_s16le <em>output_file</em></code></p>
      <p>This command transcodes an input file into a deinterlaced Apple ProRes 422 LT file with 16-bit linear PCM encoded audio. The file is deinterlaced using the yadif filter (Yet Another De-Interlacing Filter).</p>
      <dl>
        <dt>ffmpeg</dt><dd>starts the command</dd>
@@ -261,7 +291,7 @@
        <dt>-vf yadif</dt><dd>Runs a deinterlacing video filter (yet another deinterlacing filter) on the new file. <code>-vf</code> is an alias for <code>-filter:v</code>.</dd>
        <dt>-c:a pcm_s16le</dt><dd>tells FFmpeg to encode the audio stream in 16-bit linear PCM</dd>
        <dt><em>output_file</em></dt><dd>path, name and extension of the output file<br>
-        The extension for the QuickTime container is <code>.mov</code>.</dd>
+        There are currently three possible containers for ProRes 422 and 4444 which are all supported by FFmpeg: QuickTime (<code>.mov</code>), Matroska (<code>.mkv</code>) and Material eXchange Format (<code>.mxf</code>).</dd>
      </dl>
      <p>FFmpeg comes with more than one ProRes encoder:</p>
      <ul>
@@ -698,6 +728,26 @@
    </div>
    <!-- ends Modify speed -->

+    <!-- Fade both video and audio streams -->
+    <label class="recipe" for="fade_streams">Fade both video and audio streams</label>
+    <input type="checkbox" id="fade_streams">
+    <div class="hiding">
+      <h5>Fade both video and audio streams</h5>
+      <p><code>ffmpeg -i <em>input_file</em> -filter:v "fade=in:st=0:d=1, fade=out:st=59:d=1" -filter:a "afade=in:st=0:d=1, afade=out:st=59:d=1" -c:v libx264 -c:a aac <em>output_file</em></code></p>
+      <p>This command fades in and out the first and last 30 video frames and 44100 audio samples on a video</p>
+      <dl>
+          <dt>ffmpeg</dt><dd>starts the command</dd>
+          <dt>-i <em>input_file</em></dt><dd>path, name and extension of the input file</dd>
+          <dt>-filter:v "fade=in:st=0:d=1, fade=out:st=59:d=1"</dt><dd>applies a video filter that fades in the first and last 30 video frames</dd>
+          <dt>-filter:a "afade=in:st=0:d=1, afade=out:st=59:d=1"</dt><dd>applies an audio filter that fades in the first and last 30 video frames. <code>st</code> sets the start and <code>d</code> sets the duration.</dd>
+          <dt>-c:v <em>video_codec</em></dt><dd>as a video filter is used, it is not possible to use <code>-c copy</code>. The video must be re-encoded with whatever video codec is chosen, e.g. <code>ffv1</code>, <code>v210</code> or <code>prores</code>.</dd>
+          <dt>-c:a <em>audio_codec</em></dt><dd>as an audio filter is used, it is not possible to use <code>-c copy</code>. The audio must be re-encoded with whatever audio codec is chosen, e.g. <code>aac</code>.</dd>
+          <dt><em>output_file</em></dt><dd>path, name and extension of the output_file</dd>
+      </dl>
+      <p class="link"></p>
+    </div>
+    <!-- ends Fade both video and audio streams -->
+
    <!-- Synchronize video and audio streams -->
    <label class="recipe" for="sync_streams">Synchronize video and audio streams</label>
    <input type="checkbox" id="sync_streams">
@@ -773,13 +823,13 @@
      <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 <em>input_file</em> -vf "crop=<em>width</em>:<em>height</em>[:<em>x_position</em>:<em>y_position</em>]" <em>output_file</em></code></p>
      <h5>Examples</h5>
-      <p>The original frame, a screenshot of the SMPTE colorbars:</p>
+      <p>The original frame, a screenshot of Maggie Cheung in the film <i>Hero</i>:</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 <em>smpte_colorsbars.mov</em> -vf "crop=500:500" <em>output_file</em></code>:</p>
+      <p>Result of the command <code>ffmpeg -i <em>maggie.mov</em> -vf "crop=500:500" <em>output_file</em></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 <em>smpte_colorsbars.mov</em> -vf "crop=500:500:0:0" <em>output_file</em></code>, appending <code>:0:0</code> to crop from the top left corner:</p>
+      <p>Result of the command <code>ffmpeg -i <em>maggie.mov</em> -vf "crop=500:500:0:0" <em>output_file</em></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 <em>smpte_colousbars.mov</em> -vf "crop=500:300:500:30" <em>output_file</em></code>:</p>
+      <p>Result of the command <code>ffmpeg -i <em>maggie.mov</em> -vf "crop=500:300:500:30" <em>output_file</em></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>
@@ -2812,5 +2862,6 @@ Change the above data-target field, the hover-over description, the button text,
  <p>Made with ♥ at <a href="https://wiki.curatecamp.org/index.php/Association_of_Moving_Image_Archivists_%26_Digital_Library_Federation_Hack_Day_2015" target="_blank">AMIA #AVhack15</a>! Contribute to the project via <a href="https://github.com/amiaopensource/ffmprovisr" target="_blank">our GitHub page</a>!</p>
 </footer>
 </div><!-- ends "grid" -->
+<script src="js/js.js"></script>
 </body>
 </html>
--- a/js/jquery.min.js
+++ b/js/jquery.min.js
--- a/js/js.js
+++ b/js/js.js
@@ -1,42 +1,96 @@
-$(document).ready(function() {
+function scrollTo(element, to, duration) {
+  var start = element.scrollTop,
+      change = to - start,
+      currentTime = 0,
+      increment = 20;

-  function appendLink(id) {
-    $(id).next('div').find('.link').empty();
-    $(id).next('div').find('.link').append("<small>Link to this command: <a href='https://amiaopensource.github.io/ffmprovisr/index.html" + id + "'>https://amiaopensource.github.io/ffmprovisr/index.html" + id + "</a></small>");
-  }
-
-  function moveToRecipe(id) {
-    document.getElementById(id.substring(1)).checked = true;
-    $('html, body').animate({ scrollTop: $(id).offset().top }, 1000);
-    appendLink(id)
-  }
-
-  // open recipe window if a hash is found in URL
-  if (window.location.hash) {
-    id = window.location.hash
-    moveToRecipe(id)
-  }
-
-  // add hash URL when recipe is opened
-  $('label[class="recipe"]').on("click", function(){
-    id = $(this).attr("for");
-    window.location.hash = ('#' + id)
-    appendLink('#' + id)
-  })
-
-  // open recipe when clicked
-  $('a').on("click", function(){
-    intralink = $(this).attr("href")
-    if (intralink[0] == "#") {
-      moveToRecipe(intralink)
+  var animateScroll = function(){        
+    currentTime += increment;
+    var val = Math.easeInOutQuad(currentTime, start, change, duration);
+    element.scrollTop = val;
+    if(currentTime < duration) {
+        setTimeout(animateScroll, increment);
    }
+  }
+  animateScroll()
+}
+
+//t = current time, b = start value, c = change in value, d = duration
+Math.easeInOutQuad = function (t, b, c, d) {
+    t /= d/2;
+    if (t < 1) return c/2*t*t + b;
+    t--;
+    return -c/2 * (t*(t-2) - 1) + b;
+}
+
+function appendLink(id) {
+  const link = document.getElementById(id).nextElementSibling.querySelector('.link')
+  if (link) {
+    link.innerHTML = ("<small>Link to this command: <a href='https://amiaopensource.github.io/ffmprovisr/index.html#" + id + "'>https://amiaopensource.github.io/ffmprovisr/index.html#" + id + "</a></small>")
+  }
+}
+
+function moveToRecipe(id) {
+  document.getElementById(id).checked = true;
+  scrollTo(document.body, 0, 1000); 
+  appendLink(id)
+}
+
+// open recipe window if a hash is found in URL
+if (window.location.hash) {
+  id = window.location.hash.slice(1)
+  moveToRecipe(id)
+}
+
+// add hash URL when recipe is opened
+const recipes = document.querySelectorAll('label[class="recipe"]')
+recipes.forEach(function(item, i){
+  item.addEventListener("click", function(){
+    id = this.getAttribute("for");
+    window.location.hash = (id)
+    appendLink(id)
  })
+})

-  // open all windows if button is clicked
-  $('#open-all').on("click", function(){
-    $('input[type=checkbox]').each(function(){
-      this.checked = !this.checked;
+
+// open recipe when clicked
+const links = document.querySelectorAll('a')
+links.forEach(function(item, i){
+
+  item.addEventListener("click", function(){
+  intralink = this.getAttribute("href")
+  if (intralink[0] == "#") {
+    moveToRecipe(intralink.substring(1))
+  }
+})
+})
+
+
+function getCheckedBoxes(checkboxes) {
+  var checkboxesChecked = [];
+  for (var i = 0; i < checkboxes.length; i++) {
+     if (checkboxes[i].checked) {
+        checkboxesChecked.push(checkboxes[i]);
+     }
+  }
+  return checkboxesChecked.length > 0 ? checkboxesChecked : null;
+}
+
+// Collapse all recipes when button is clicked
+document.getElementById('toggle-expand-collapse-all').addEventListener("click", function(){
+  const checkboxes = document.querySelectorAll('input[type=checkbox]')
+  var checked = getCheckedBoxes(checkboxes);
+
+  if (checked) {
+    // Collapse all
+    document.querySelectorAll('input[type=checkbox]').forEach(function(item, i){
+      item.checked = false;
+      })
+  } else {
+    // Expand all
+    document.querySelectorAll('input[type=checkbox]').forEach(function(item, i){
+    item.checked = true;
    })
-  });
+  }
+})

-});
--- a/readme.md
+++ b/readme.md
@@ -10,7 +10,7 @@ Repository of useful FFmpeg command lines for archivists!
 * [Contributors](#contributors)
 * [AVHack Team](#avhack-team)
 * [Sister projects](#sister-projects)
-* [Awards and mentions](#articles-and-mentions)
+* [Articles and mentions](#articles-and-mentions)
 * [License](#license)

 ## What is this?
@@ -83,31 +83,36 @@ You can read our contributor code of conduct [here](https://github.com/amiaopens
  
 *Code Contributors*:  
 ablwr (Ashley)  
+alavigne12 (A. Lavigne)  
+Anushka-codergirl (Anushka Raj)  
 bastibeckr (Basti Becker)  
-b00giehead (Joanna White)  
 bturkus  
 dericed (Dave Rice)  
+digitensions (Joanna White)  
 edsu (Ed Summers)  
 jamessam (Jim Sam)  
 jfarbowitz (Jonathan Farbowitz)  
 kfrn (Katherine Frances Nagels)  
 kgrons (Kathryn Gronsbell)  
 kieranjol (Kieran O'Leary)  
-llogan (Lou)  
+llogan (Lou Logan)  
+macasaurusrex (Maura)  
 mgiraldo (Mauricio Giraldo)  
 pjotrek-b (Peter B.)  
 privatezero (Andrew Weaver)  
 retokromer (Reto Kromer)  
 rfraimow  
  
-*All Contributors*:
+All Contributors:  
 ablwr (Ashley)  
+alavigne12 (A. Lavigne)  
+Anushka-codergirl (Anushka Raj)  
 audiovisualopen  
 bastibeckr (Basti Becker)  
-b00giehead (Joanna White)  
 brainwane (Sumana Harihareswara)  
 bturkus  
 dericed (Dave Rice)  
+digitensions (Joanna White)  
 drodz11 (Dave Rodriguez)  
 edsu (Ed Summers)  
 EG-tech (Ethan Gates)  
@@ -122,7 +127,9 @@ kellyhaydon (metacynic)
 kfrn (Katherine Frances Nagels)  
 kgrons (Kathryn Gronsbell)  
 kieranjol (Kieran O'Leary)  
-llogan (Lou)  
+llogan (Lou Logan)  
+macasaurusrex (Maura)  
+mercuryswitch  
 mgiraldo (Mauricio Giraldo)  
 mulvya  
 nkrabben (Nick Krabbenhoeft)  
@@ -132,12 +139,13 @@ retokromer (Reto Kromer)
 rfraimow  
 richardpl (Paul B Mahol)  
 ross-spencer (Ross Spencer)  
+taschenbach (Tommy Aschenbach)  
 todrobbins (Tod Robbins)  
  
 Repo: amiaopensource/ffmprovisr  
-Code Contributors: 17  
-All Contributors: 32   
-Last updated: 2019-02-11  
+GitHub Contributors: 20  
+All Contributors: 37  
+Last updated: 2019-12-11 

 ## AVHack Team

--- a/recipes.txt
+++ b/recipes.txt
@@ -1,5 +1,7 @@
 # Basic rewrap command
 ffmpeg -i input_file.ext -c copy -map 0 output_file.ext
+# Generate Broadcast WAV
+ffmpeg -i input_file.wav -c copy -write_bext 1 -metadata field_name='Content' output_file.wav
 # Rewrap DV video to .dv file
 ffmpeg -i input_file -f rawvideo -c:v copy output_file.dv
 # Transcode to deinterlaced Apple ProRes LT
@@ -36,6 +38,8 @@ ffmpeg -i input_file -c:v copy -aspect 4:3 output_file
 ffmpeg -i input_file -c:v libx264 -vf colormatrix=src:dst output_file
 # Modify image and sound speed
 ffmpeg -i input_file -r output_fps -filter_complex "[0:v]setpts=input_fps/output_fps*PTS[v]; [0:a]atempo=output_fps/input_fps[a]" -map "[v]" -map "[a]" output_file
+# Fade both video and audio streams
+ffmpeg -i input_file -filter:v "fade=in:st=0:d=1, fade=out:st=59:d=1" -filter:a "afade=in:st=0:d=1, afade=out:st=59:d=1" -c:v libx264 -c:a aac output_file
 # Synchronize video and audio streams
 ffmpeg -i input_file -itsoffset 0.125 -i input_file -map 1:v -map 0:a -c copy output_file
 # Clarify stream properties
Author	SHA1	Message	Date
Ashley	3984c8aae3	Merge pull request #425 from amiaopensource/rm-jquery Remove jQuery	2020-05-14 08:24:18 -04:00
Ashley Blewer	f9ef8dbae3	Update lets as consts	2020-05-13 17:12:28 -04:00
Ashley Blewer	f814abbc0a	Move js up into body	2020-05-13 10:05:31 -04:00
Ashley Blewer	843f05cc73	Remove jQuery library and use vanilla js	2020-05-13 09:35:16 -04:00
Ashley Blewer	54577f4b28	Add missing link tag	2020-05-13 09:34:28 -04:00
Ashley	aa5d63f4c4	Merge pull request #423 from amiaopensource/recipe_list add Fade both video and audio streams to recipe list	2020-05-02 12:06:47 -04:00
Reto Kromer	dd257331fe	add Fade video and audio streams to recipe list	2020-05-02 07:33:52 +02:00
Ashley	feac0ded9b	Merge pull request #422 from DaleLore/fade Update: Adding fade/afade to streams	2020-05-01 23:10:36 -04:00
Lorena A Ramírez-López	a33ed1d24f	Apply suggestions from code review Good point. Thanks Co-authored-by: Ashley <ashley.blewer@gmail.com>	2020-05-01 23:09:49 -04:00
Lorena A Ramírez-López	020b9fbe73	Update: Adding fade/afade to streams	2020-05-01 23:03:25 -04:00
Ashley	1df442f6dd	Merge pull request #421 from amiaopensource/prores add all containers for ProRes	2020-05-01 22:17:31 -04:00
Reto Kromer	3a05c8f440	add all containers for ProRes	2020-05-01 09:47:57 +02:00
Ashley	89642fdd56	Merge pull request #420 from amiaopensource/BWF add BWF to recipe list	2020-04-16 08:45:15 -04:00
Reto Kromer	a9ec972aef	add BWF to recipe list	2020-04-16 14:31:13 +02:00
Reto Kromer	91540a2fb8	Merge pull request #415 (use same wording in ToC and title)	2020-01-04 10:58:41 +01:00
Reto Kromer	2becad3d9c	use same wording in ToC and title	2019-12-25 10:32:15 +01:00
Ashley	e4c327bbac	Merge pull request #414 from amiaopensource/kfrn/tweaks Tweaks: naming, whitespace, collapse all recipes	2019-12-17 11:48:57 -05:00
kfrn	4359d6dd4a	Update 'show/hide recipes' (expand/collapse) functionality Previously, it would expand the recipe if currently collapsed, and vice versa. Now, if any recipes are currently expanded, it will collapse all; otherwise, all recipes will be expanded. The 'expand all' functionality is necessary for full-text searching.	2019-12-18 05:42:29 +13:00
kfrn	d184ed2fe9	Code style: remove trailing whitespace	2019-12-17 22:36:47 +13:00
kfrn	089725a753	Crop video recipe: correct name/description of example images	2019-12-17 22:34:37 +13:00
Ashley	897f1b1616	Merge pull request #413 from amiaopensource/update-contributors Update contributors list with octohatrack	2019-12-11 12:08:30 -05:00
Ashley	358a2ec23b	add "last updated"	2019-12-11 12:04:09 -05:00
Ashley Blewer	de6c08a58d	Update contributors list with octohatrack	2019-12-10 17:56:18 -05:00
Ashley	0d1fc1bfe8	Merge pull request #412 from amiaopensource/BWF_name fix BWF name	2019-12-10 10:41:34 -05:00
Reto Kromer	cbca3ac7ad	fix BWF name	2019-12-10 10:04:07 +01:00
Ashley	bcc425a955	Merge pull request #410 from amiaopensource/add-bext add BWF embedding recipe	2019-12-09 12:15:51 -05:00
weaver	0353c1761e	ch ch ch changes	2019-12-06 08:37:11 -08:00
weaver	e3aa81fb95	add BWF	2019-12-05 16:28:58 -08:00
Ashley	633374f22d	Merge pull request #409 from macasaurusrex/issue-399-meta-tag-validation Update index.html	2019-11-20 10:39:49 -05:00
Maura	1d60060eed	Update index.html fix for ticket 399: meta tag validation error. w3 doesn't like chartset in the same tag as viewport so I split them out based on what was described in the ticket	2019-11-19 18:07:41 -05:00