commit 2965ec345d714347b6a0cd4e763e5acb40d0192a Author: Ilya Grigorik Date: Sun Mar 2 14:44:20 2014 -0800 initial import diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/icons/icon128.png b/icons/icon128.png new file mode 100755 index 0000000..97b1826 Binary files /dev/null and b/icons/icon128.png differ diff --git a/icons/icon16.png b/icons/icon16.png new file mode 100755 index 0000000..aa58507 Binary files /dev/null and b/icons/icon16.png differ diff --git a/icons/icon19.png b/icons/icon19.png new file mode 100755 index 0000000..1bdd9e8 Binary files /dev/null and b/icons/icon19.png differ diff --git a/icons/icon48.png b/icons/icon48.png new file mode 100755 index 0000000..1d74d36 Binary files /dev/null and b/icons/icon48.png differ diff --git a/icons/large.png b/icons/large.png new file mode 100644 index 0000000..dd197e4 Binary files /dev/null and b/icons/large.png differ diff --git a/inject.css b/inject.css new file mode 100644 index 0000000..423fb9c --- /dev/null +++ b/inject.css @@ -0,0 +1,49 @@ +.tc-videoHost { + position: relative; + text-align: center; +} + +.tc-videoController { + position: absolute; + background: black; + color: white; + + border-radius: 5px; + padding: 5px; + margin: 10px; + line-height: 1.8em; + + cursor: pointer; + z-index: 9999999; + opacity: 0.3; + + font-family: Verdana; + font-size: 13px; +} + +.tc-videController button { +} + +.tc-videoController:hover { + opacity: 0.7; +} + +.tc-videoController:hover .tc-controls { + display: inline; +} + +.tc-controls { + display: none; + margin-left:1em; +} + +.tc-controls button { + color: black !important; + background: white !important; + font-weight: bold !important; + margin: 0 2px !important; + border-radius: 5px !important; + padding: 3px 8px !important; + font-size: 15px !important; + line-height: 15px !important; +} diff --git a/inject.js b/inject.js new file mode 100644 index 0000000..5092446 --- /dev/null +++ b/inject.js @@ -0,0 +1,106 @@ +chrome.extension.sendMessage({}, function(response) { + var readyStateCheckInterval = setInterval(function() { + if (document.readyState === "complete") { + clearInterval(readyStateCheckInterval); + + var tc = tc || {}; + tc.videoController = function(target) { + this.video = target; + this.initializeControls(); + + this.speedIndicator.textContent = this.getSpeed(); + this.video.addEventListener('ratechange', function(event) { + this.speedIndicator.textContent = this.getSpeed(); + }.bind(this)); + }; + + tc.videoController.prototype.getSpeed = function() { + return parseFloat(this.video.playbackRate).toFixed(2); + } + + tc.videoController.prototype.remove = function() { + this.parentElement.removeChild(this); + } + + tc.videoController.prototype.initializeControls = function() { + var fragment = document.createDocumentFragment(); + var container = document.createElement('div'); + var speedIndicator = document.createElement('span'); + + var controls = document.createElement('span'); + var fasterButton = document.createElement('button'); + var slowerButton = document.createElement('button'); + var rewindButton = document.createElement('button'); + + rewindButton.innerHTML = '«'; + fasterButton.textContent = '+'; + slowerButton.textContent = '-'; + + controls.appendChild(rewindButton); + controls.appendChild(slowerButton); + controls.appendChild(fasterButton); + + container.appendChild(speedIndicator); + container.appendChild(controls); + + container.classList.add('tc-videoController'); + controls.classList.add('tc-controls'); + + fragment.appendChild(container); + this.video.parentElement.insertBefore(fragment, this.video); + this.video.classList.add('tc-videoHost'); + + this.speedIndicator = speedIndicator; + + container.addEventListener('click', function(e) { + if (e.target === slowerButton) { runAction('slower') } + else if (e.target === fasterButton) { runAction('faster') } + else if (e.target === rewindButton) { runAction('rewind') } + else { + container.nextSibling.classList.add("vc-cancelled") + container.remove(); + } + + e.preventDefault(); + e.stopPropagation(); + }, true); + } + + function runAction(action) { + var videoTags = document.getElementsByTagName('video'); + videoTags.forEach = Array.prototype.forEach; + + videoTags.forEach(function(v) { + if (!v.paused && !v.classList.contains("vc-cancelled")) { + if (action === 'rewind') { + v.playbackRate -= 0.20; + v.currentTime -= 10; + } else if (action === 'faster') { v.playbackRate += 0.10 } + else if (action === 'slower') { v.playbackRate -= 0.10 } + } + }); + } + + document.addEventListener('keydown', function(event) { + if (event.keyCode == 65) { runAction('rewind') } // A + else if (event.keyCode == 68) { runAction('faster') } // D + else if (event.keyCode == 83) { runAction('slower') } // S + + return false; + }, true); + + document.addEventListener('DOMNodeInserted', function(event) { + var node = event.target || null; + if (node && node.nodeName === 'VIDEO') { + new tc.videoController(node); + } + }); + + var videoTags = document.getElementsByTagName('video'); + videoTags.forEach = Array.prototype.forEach; + videoTags.forEach(function(video) { + var control = new tc.videoController(video); + }); + } + }, 10); +}); diff --git a/manifest.json b/manifest.json new file mode 100755 index 0000000..761ed73 --- /dev/null +++ b/manifest.json @@ -0,0 +1,20 @@ +{ + "name": "HTML5 Video Playback Speed Controller", + "version": "0.1.0", + "manifest_version": 2, + "description": "Lean in and speed up your video learning with handy shortcuts to accelerate, slow-down, and rewind your video right from your keyboard. This extension adds a handy video controller to any HTML5 video, regardless of the type of player. Shortcuts: 'a' for rewind, 's' for slower, and 'd' for faster playback. To remove the controller simply click on the speed indicator in the top right.", + "homepage_url": "https://github.com/igrigorik/videospeed", + "icons": { + "16": "icons/icon16.png", + "48": "icons/icon48.png", + "128": "icons/icon128.png" + }, + "permissions": [ "activeTab" ], + "content_scripts": [{ + "all_frames": true, + "matches": [ "http://*/*", "https://*/*"], + "css": [ "inject.css" ], + "js": [ "inject.js" ] + } + ] +}