mirror of
https://github.com/SoPat712/videospeed.git
synced 2025-08-22 02:18:45 -04:00
added functionality to allow user to save Video Speed in Chrome Sync Storage via Chrome Extensions's Browser Action and automated the process to apply user saved Video Speed to HTML5 videos
This commit is contained in:
33
browser_action.html
Normal file
33
browser_action.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#mainPopup {
|
||||
padding: 5px;
|
||||
height: 20px;
|
||||
width: 120px;
|
||||
font-family: Helvetica, Ubuntu, Arial, sans-serif;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mainPopup">
|
||||
<div class="tc-controls">
|
||||
<button data-control="decrease" id="decrease-video-speed">-</button>
|
||||
<span id="current-video-speed">1</span>
|
||||
<button data-control="increase" id="increase-video-speed">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="browser_action.js"></script>
|
||||
</body>
|
||||
</html>
|
64
browser_action.js
Normal file
64
browser_action.js
Normal file
@@ -0,0 +1,64 @@
|
||||
(function () {
|
||||
|
||||
var video_speed = (function () {
|
||||
|
||||
var common_speed;
|
||||
|
||||
function set_speed(speed) {
|
||||
speed = parseFloat(Math.round(speed * 100) / 100);
|
||||
chrome.storage.sync.set({'speed': speed});
|
||||
common_speed = speed;
|
||||
}
|
||||
|
||||
function initialize(callback) {
|
||||
chrome.storage.sync.get('speed', function (storage) {
|
||||
if (storage.speed) {
|
||||
common_speed = storage.speed;
|
||||
} else {
|
||||
set_speed(1.00);
|
||||
}
|
||||
callback(common_speed);
|
||||
});
|
||||
}
|
||||
|
||||
function increase() {
|
||||
set_speed(common_speed + 0.10);
|
||||
return common_speed;
|
||||
}
|
||||
|
||||
function decrease() {
|
||||
set_speed(common_speed - 0.10);
|
||||
return common_speed;
|
||||
}
|
||||
|
||||
return {
|
||||
initialize: initialize,
|
||||
increase: increase,
|
||||
decrease: decrease
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
var current_speed = document.getElementById('current-video-speed'),
|
||||
speed_controls = document.getElementsByTagName('button');
|
||||
|
||||
speed_controls.forEach = Array.prototype.forEach;
|
||||
|
||||
video_speed.initialize(function (speed) {
|
||||
current_speed.innerHTML = speed.toFixed(2);
|
||||
});
|
||||
|
||||
speed_controls.forEach(function (speed_control) {
|
||||
speed_control.addEventListener('click', function (event) {
|
||||
var speed, control = event.target.attributes['data-control'].value;
|
||||
if (control === 'increase') {
|
||||
speed = video_speed.increase();
|
||||
} else {
|
||||
speed = video_speed.decrease();
|
||||
}
|
||||
|
||||
current_speed.innerHTML = speed.toFixed(2);
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
@@ -12,6 +12,14 @@ chrome.extension.sendMessage({}, function(response) {
|
||||
this.video.addEventListener('ratechange', function(event) {
|
||||
this.speedIndicator.textContent = this.getSpeed();
|
||||
}.bind(this));
|
||||
chrome.storage.sync.get('speed', function(storage) {
|
||||
target.playbackRate = storage.speed;
|
||||
});
|
||||
chrome.storage.onChanged.addListener(function(storage) {
|
||||
if(storage.speed) {
|
||||
target.playbackRate = storage.speed.newValue;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
tc.videoController.prototype.getSpeed = function() {
|
||||
|
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "HTML5 Video Playback Speed Controller",
|
||||
"version": "0.1.1",
|
||||
"version": "0.1.2",
|
||||
"manifest_version": 2,
|
||||
"description": "Lean in and speed up your video learning with handy shortcuts to accelerate, slow-down, and rewind your video via your keyboard.",
|
||||
"homepage_url": "https://github.com/igrigorik/videospeed",
|
||||
@@ -9,12 +9,17 @@
|
||||
"48": "icons/icon48.png",
|
||||
"128": "icons/icon128.png"
|
||||
},
|
||||
"permissions": [ "activeTab" ],
|
||||
"permissions": [ "activeTab", "storage" ],
|
||||
"content_scripts": [{
|
||||
"all_frames": true,
|
||||
"matches": [ "http://*/*", "https://*/*"],
|
||||
"css": [ "inject.css" ],
|
||||
"js": [ "inject.js" ]
|
||||
}
|
||||
]
|
||||
],
|
||||
"browser_action": {
|
||||
"default_icon": "icons/icon16.png",
|
||||
"default_title": "Video Playback Speed Controller",
|
||||
"default_popup": "browser_action.html"
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user