Rob’s Timecode Calculator

Rob's Timecode Calculator body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 20px; } .calculator-container { background: #f4f6f8; border: 1px solid #e1e4e8; border-radius: 8px; padding: 30px; margin-bottom: 40px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .calc-header { text-align: center; margin-bottom: 25px; } .calc-header h2 { margin: 0; color: #2c3e50; } .timecode-row { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .input-group { display: flex; flex-direction: column; align-items: center; } .input-group label { font-size: 0.85rem; margin-bottom: 5px; font-weight: 600; color: #555; } .tc-inputs { display: flex; align-items: center; gap: 5px; } .tc-input { width: 50px; padding: 10px; font-size: 1.2rem; text-align: center; border: 1px solid #ccc; border-radius: 4px; font-family: "Courier New", Courier, monospace; } .separator { font-weight: bold; font-size: 1.2rem; color: #777; } .controls-row { display: flex; justify-content: center; gap: 20px; margin-bottom: 25px; flex-wrap: wrap; } .select-wrapper { display: flex; flex-direction: column; } .select-wrapper label { font-size: 0.9rem; margin-bottom: 5px; font-weight: bold; } select { padding: 10px; font-size: 1rem; border-radius: 4px; border: 1px solid #ccc; background: white; min-width: 150px; } button.calc-btn { background-color: #0073aa; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 4px; cursor: pointer; transition: background 0.3s; display: block; margin: 0 auto; width: 100%; max-width: 300px; } button.calc-btn:hover { background-color: #005177; } #result-container { margin-top: 30px; padding: 20px; background: #fff; border: 1px solid #ddd; border-radius: 6px; text-align: center; display: none; } .result-tc { font-family: "Courier New", Courier, monospace; font-size: 2.5rem; font-weight: bold; color: #2c3e50; margin-bottom: 10px; } .result-frames { font-size: 1.1rem; color: #666; } .error-msg { color: #d63638; font-weight: bold; display: none; text-align: center; margin-top: 10px; } .content-section { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } h3 { color: #2c3e50; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 30px; } p { margin-bottom: 15px; } ul { margin-bottom: 20px; padding-left: 20px; } li { margin-bottom: 8px; } @media (max-width: 600px) { .timecode-row { flex-direction: column; align-items: center; } .tc-inputs { margin-bottom: 15px; } }

Rob's Timecode Calculator

Calculate duration, offset, and total frames for video editing.

: : :
Add (+) Subtract (-)
23.976 (24 Base) 24 Film 25 PAL 29.97 NTSC (30 Base) 30 50 59.94 (60 Base) 60
: : :
Resulting Timecode
00:00:00:00
Total Frames: 0

Using Rob's Timecode Calculator

Video editors, assistant editors, and post-production supervisors often need to perform complex time math that standard calculators cannot handle. Timecode is based on a sexagesimal system (base 60) for hours, minutes, and seconds, but the frame count depends entirely on the frame rate of your project (e.g., base 24, 25, or 30).

This tool, dubbed "Rob's Timecode Calculator," helps you quickly add offsets to a timecode or subtract a start time from an end time to find the duration of a clip.

How It Works

To perform a calculation:

  • Enter Timecode A: Input the hours, minutes, seconds, and frames.
  • Select Operation: Choose "Add" to shift a timecode forward, or "Subtract" to calculate the difference (Duration).
  • Select FPS: Choose your project's frame rate. Note that for fractional frame rates like 23.976 or 29.97, standard timecode calculations use the "Count" base (24 or 30) unless working specifically with Drop Frame logic. This calculator uses the standard integer base for calculations (Non-Drop Frame logic).
  • Enter Timecode B: Input the second value.

Understanding Frame Rates

The mathematics of timecode changes based on your FPS setting:

  • 24 FPS: Standard for cinema. There are 24 frames in one second (00-23).
  • 25 FPS: Standard for PAL television (Europe/Asia). 25 frames per second.
  • 29.97/30 FPS: Standard for NTSC television (North America/Japan). Calculations usually assume a base of 30 frames.
  • 60 FPS: High frame rate video, often used for slow motion or sports broadcasting.

Example Calculation

If you have a clip starting at 01:00:00:00 and ending at 01:00:10:12 (10 seconds and 12 frames), selecting "Subtract" will yield a result of 00:00:10:12, which is the total duration. If you want to offset a clip starting at 01:00:00:00 by 500 frames, convert 500 frames to timecode and use the "Add" function.

function calculateTimecode() { // Clear errors var errorDiv = document.getElementById('error-msg'); errorDiv.style.display = 'none'; errorDiv.innerText = "; // Get Inputs var tc1_h = parseInt(document.getElementById('tc1_h').value) || 0; var tc1_m = parseInt(document.getElementById('tc1_m').value) || 0; var tc1_s = parseInt(document.getElementById('tc1_s').value) || 0; var tc1_f = parseInt(document.getElementById('tc1_f').value) || 0; var tc2_h = parseInt(document.getElementById('tc2_h').value) || 0; var tc2_m = parseInt(document.getElementById('tc2_m').value) || 0; var tc2_s = parseInt(document.getElementById('tc2_s').value) || 0; var tc2_f = parseInt(document.getElementById('tc2_f').value) || 0; var op = document.getElementById('operation').value; var fpsVal = document.getElementById('fps').value; // Determine Integer Frame Base (e.g. 29.97 uses 30 math) var frameBase = 24; if (fpsVal === "23.976" || fpsVal === "24") frameBase = 24; else if (fpsVal === "25") frameBase = 25; else if (fpsVal === "29.97" || fpsVal === "30") frameBase = 30; else if (fpsVal === "50") frameBase = 50; else if (fpsVal === "59.94" || fpsVal === "60") frameBase = 60; // Validation for frames input if (tc1_f >= frameBase || tc2_f >= frameBase) { errorDiv.innerText = "Error: Frames input exceeds frame rate base (" + frameBase + ")."; errorDiv.style.display = 'block'; return; } if (tc1_s >= 60 || tc2_s >= 60 || tc1_m >= 60 || tc2_m >= 60) { errorDiv.innerText = "Error: Seconds or Minutes cannot exceed 59."; errorDiv.style.display = 'block'; return; } // Convert TC1 to Total Frames var totalFrames1 = (tc1_h * 3600 * frameBase) + (tc1_m * 60 * frameBase) + (tc1_s * frameBase) + tc1_f; // Convert TC2 to Total Frames var totalFrames2 = (tc2_h * 3600 * frameBase) + (tc2_m * 60 * frameBase) + (tc2_s * frameBase) + tc2_f; var finalFrames = 0; // Calculate if (op === 'add') { finalFrames = totalFrames1 + totalFrames2; } else { finalFrames = totalFrames1 – totalFrames2; } // Handle Negative Result var isNegative = false; if (finalFrames < 0) { isNegative = true; finalFrames = Math.abs(finalFrames); } // Convert back to Timecode var remFrames = finalFrames % frameBase; var totalSeconds = Math.floor(finalFrames / frameBase); var remSeconds = totalSeconds % 60; var totalMinutes = Math.floor(totalSeconds / 60); var remMinutes = totalMinutes % 60; var remHours = Math.floor(totalMinutes / 60); // Formatting Helper function pad(n) { return n < 10 ? '0' + n : n; } var resultString = (isNegative ? "-" : "") + pad(remHours) + ":" + pad(remMinutes) + ":" + pad(remSeconds) + ":" + pad(remFrames); // Display Result document.getElementById('result-tc').innerText = resultString; document.getElementById('result-frames').innerText = "Total Frames: " + (isNegative ? "-" : "") + finalFrames; document.getElementById('result-container').style.display = 'block'; }

Leave a Reply

Your email address will not be published. Required fields are marked *