diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | index.css | 4 | ||||
| -rw-r--r-- | index.html | 26 | ||||
| -rw-r--r-- | main.js | 42 |
4 files changed, 73 insertions, 1 deletions
@@ -1,2 +1,2 @@ # yt-frame-timer -A Chrome extension that times YouTube videos to the frame with a few pieces of information +A JavaScript-based program to determine the time between start and end points of a YouTube video down to the frame. Based on [https://docs.google.com/spreadsheets/d/1c3eiw1_00Tx1snAdU_kvncuA8C8xu5-q3tSOPRuqhzI/](https://docs.google.com/spreadsheets/d/1c3eiw1_00Tx1snAdU_kvncuA8C8xu5-q3tSOPRuqhzI/).
\ No newline at end of file diff --git a/index.css b/index.css new file mode 100644 index 0000000..255f752 --- /dev/null +++ b/index.css @@ -0,0 +1,4 @@ +.content { + max-width: 500px; + margin: auto; +}
\ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e6c920e --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> +<head> + <title>YouTube Frame Timer</title> + <link href="index.css" rel="stylesheet"> + <script src="main.js"></script> +</head> +<body class="content"> + <h1>YouTube Frame Timer</h1> + <h3>About</h3> + <p>Takes start and stop points of a YouTube video, down to the frame, and gives the time between them in the format 1h 23m 45s 678ms.</p> + <h3>Video Framerate</h3> + <p>Right click the YouTube video and select "Stats for nerds." The third line is "Current / Optimal Res" - find the two numbers after the @ and enter them for framerate.</p> + <label for="framerate">Framerate: </label><input type="text" id="framerate" size="3" /> + <h3>Video Endpoints</h3> + <p>Find the starting point (you can use the , and . keys to find the exact frame). Right click the video and select "Copy debug info" and paste it for starting frame. Repeat for ending frame.</p> + <label for="startobj">Starting frame: </label><input type="text" id="startobj" style='width:100%'/> + <p></p> + <label for="endobj">Ending frame: </label><input type="text" id="endobj" style='width:100%'/> + <h3>Video Time</h3> + <button onclick="compute()">Compute time</button> + <p></p> + <label for="time">Time: </label><input type="text" id="time" readonly size="20" /> + <p><a href="https://github.com/slashinfty/yt-frame-timer" target="_blank">View Source Code</a></p> +</body> +</html>
\ No newline at end of file @@ -0,0 +1,42 @@ +function compute() { + let startObj = JSON.parse(document.getElementById('startobj').value); + let endObj = JSON.parse(document.getElementById('endobj').value); + let framerate = document.getElementById('framerate').value; + if (startObj == undefined || endObj == undefined || framerate == undefined) return; + let hours = 0; + let minutes = 0; + let seconds = 0; + let milliseconds = 0; + let frameRate = parseInt(framerate); + let diff = (endObj.lct - startObj.lct) * frameRate; + let frames = diff; + if (frames >= frameRate) { + seconds = Math.floor(frames / frameRate); + frames = frames % frameRate; + milliseconds = Math.round(frames / frameRate * 1000); + if (milliseconds < 10) { + milliseconds = '00' + milliseconds; + } else if (milliseconds < 100) { + milliseconds = '0' + milliseconds; + } + if (seconds >= 60) { + minutes = Math.floor(seconds / 60); + seconds = seconds % 60; + seconds = seconds < 10 ? '0' + seconds : seconds; + } + if (minutes >= 60) { + hours = Math.floor(minutes / 60); + minutes = minutes % 60; + minutes = minutes < 10 ? '0' + minutes : minutes; + } + } else { + milliseconds = Math.round(frames / frameRate * 1000); + if (milliseconds < 10) { + milliseconds = '00' + milliseconds; + } else if (milliseconds < 100) { + milliseconds = '0' + milliseconds; + } + } + let print = hours.toString() + 'h ' + minutes.toString() + 'm ' + seconds.toString() + 's ' + milliseconds.toString() + 'ms'; + document.getElementById('time').value = print; +}
\ No newline at end of file |