-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvideospeed.js
More file actions
125 lines (105 loc) · 3.48 KB
/
videospeed.js
File metadata and controls
125 lines (105 loc) · 3.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
(function () {
const video = document.querySelector('video');
if (!video) return;
let speed = 1.0;
const container = document.createElement('div');
container.style.position = 'fixed';
container.style.top = '10px';
container.style.right = '10px';
container.style.zIndex = '10000';
container.style.background = 'rgba(0,0,0,0.8)';
container.style.color = 'white';
container.style.padding = '10px';
container.style.borderRadius = '8px';
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.fontFamily = 'Arial';
container.style.userSelect = 'none';
container.style.cursor = 'default';
// Title bar (for dragging + close button)
const titleBar = document.createElement('div');
titleBar.style.display = 'flex';
titleBar.style.justifyContent = 'space-between';
titleBar.style.alignItems = 'center';
titleBar.style.marginBottom = '8px';
titleBar.style.cursor = 'move';
const title = document.createElement('span');
title.textContent = 'Speed Control';
const closeBtn = document.createElement('button');
closeBtn.textContent = '×';
closeBtn.style.marginLeft = '10px';
closeBtn.style.background = 'transparent';
closeBtn.style.color = 'white';
closeBtn.style.border = 'none';
closeBtn.style.fontSize = '16px';
closeBtn.style.cursor = 'pointer';
closeBtn.onclick = () => container.remove();
titleBar.appendChild(title);
titleBar.appendChild(closeBtn);
container.appendChild(titleBar);
// Controls row
const controls = document.createElement('div');
controls.style.display = 'flex';
controls.style.alignItems = 'center';
controls.style.gap = '10px';
const down = document.createElement('button');
down.textContent = '−';
down.onclick = () => {
speed = Math.max(0.1, speed - 0.1);
updateSpeed();
};
const up = document.createElement('button');
up.textContent = '+';
up.onclick = () => {
speed = Math.min(16, speed + 0.1);
updateSpeed();
};
const input = document.createElement('input');
input.type = 'number';
input.min = '0.1';
input.max = '16.0';
input.step = '0.1';
input.value = speed.toFixed(1);
input.style.width = '60px';
input.onchange = () => {
const val = parseFloat(input.value);
if (!isNaN(val) && val >= 0.1 && val <= 16.0) {
speed = val;
updateSpeed();
}
};
const speedDisplay = document.createElement('span');
speedDisplay.textContent = speed.toFixed(1) + 'x';
controls.appendChild(down);
controls.appendChild(input);
controls.appendChild(up);
controls.appendChild(speedDisplay);
container.appendChild(controls);
document.body.appendChild(container);
function updateSpeed() {
video.playbackRate = speed;
input.value = speed.toFixed(1);
speedDisplay.textContent = speed.toFixed(1) + 'x';
}
updateSpeed();
// Make draggable
let isDragging = false;
let offsetX = 0, offsetY = 0;
titleBar.addEventListener('mousedown', function (e) {
isDragging = true;
offsetX = e.clientX - container.offsetLeft;
offsetY = e.clientY - container.offsetTop;
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', function (e) {
if (isDragging) {
container.style.left = e.clientX - offsetX + 'px';
container.style.top = e.clientY - offsetY + 'px';
container.style.right = 'auto'; // stop sticking to right
}
});
document.addEventListener('mouseup', function () {
isDragging = false;
document.body.style.userSelect = '';
});
})();