-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathvideotest copy.html
98 lines (84 loc) · 3.06 KB
/
videotest copy.html
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
<!DOCTYPE html>
<html>
<head>
<title>Video Selection</title>
<style>
#video-container {
position: relative;
}
#selection-box {
position: absolute;
border: 2px dashed red;
pointer-events: none;
}
</style>
</head>
<body>
<div id="video-container">
<video id="video" loop="" controls="">
<source type="video/mp4" src="https://i.imgur.com/S5l1qyN.mp4">
</video>
<div id="selection-box"></div>
</div>
<button onclick="selectRectangle()">Select Rectangle</button>
<script>
const video = document.getElementById('video');
const selectionBox = document.getElementById('selection-box');
let isSelecting = false;
let initialX, initialY;
video.addEventListener('play', () => {
// Ensure the video and the selection box have the same dimensions
// selectionBox.style.left = video.getBoundingClientRect().left + 'px';
// selectionBox.style.top = video.getBoundingClientRect().top + 'px';
// selectionBox.style.width = video.clientWidth + 'px';
// selectionBox.style.height = video.clientHeight + 'px';
selectionBox.width = video.videoWidth;
selectionBox.height = video.videoHeight;
// Get the 2D rendering context of the canvas
const context = selectionBox.getContext('2d');
// You can draw on the canvas as needed, for example, drawing a red rectangle:
context.fillStyle = 'red';
context.fillRect(0, 0, video.videoWidth, video.videoHeight);
});
function selectRectangle() {
isSelecting = true;
video.addEventListener('mousedown', (event) => {
console.log("mouse down")
// console.log(event.clientX, event.clientY)
if (isSelecting) {
// if (initialX === undefined && initialY === undefined) {
initialX = event.clientX - video.getBoundingClientRect().left;
initialY = event.clientY - video.getBoundingClientRect().top;
// }
console.log(initialX, initialY)
selectionBox.style.left = initialX + 'px';
selectionBox.style.top = initialY + 'px';
}
});
video.addEventListener('mousemove', (event) => {
console.log("mouse move")
console.log(event.clientX, event.clientY)
if (isSelecting) {
const currentX = event.clientX - video.getBoundingClientRect().left;
const currentY = event.clientY - video.getBoundingClientRect().top;
const width = currentX - initialX;
const height = currentY - initialY;
console.log(initialX, initialY, currentX, currentY, width, height)
// selectionBox.style.left = initialX + 'px';
// selectionBox.style.top = initialY + 'px';
selectionBox.style.width = width + 'px';
selectionBox.style.height = height + 'px';
}
});
video.addEventListener('mouseup', () => {
console.log("mouse up")
if (isSelecting) {
isSelecting = false;
// initialX = undefined;
// initialY = undefined;
}
});
}
</script>
</body>
</html>