Hugging Face's logo

Spaces:
SEA-AI
/
brain-videoslider
Running

App Files Community
kevinconka commited on
Commit
85c1b0c
·
verified ·
1 Parent(s): 9dc5d72

try out syncing videos

Browse files
Files changed (1) hide show
  1. index.html +29 -8
index.html CHANGED
@@ -1,6 +1,5 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
-
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -85,7 +84,7 @@
85
  }
86
 
87
  .slider.ready:hover::before,
88
- .slider.ready:hover::after {
89
  opacity: 1;
90
  }
91
 
@@ -116,7 +115,6 @@
116
  }
117
  </style>
118
  </head>
119
-
120
  <body>
121
  <div class="video-container" id="videoContainer">
122
  <video id="video1" src="flir_brain_padded.mp4" playsinline autoplay loop muted></video>
@@ -127,11 +125,35 @@
127
  <script>
128
  const slider = document.getElementById('slider');
129
  const container = document.getElementById('videoContainer');
130
- const secondVideo = document.getElementById('video2');
 
131
 
132
  let isDragging = false;
133
 
134
- // Mouse events
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  slider.addEventListener('mousedown', () => isDragging = true);
136
  window.addEventListener('mouseup', () => isDragging = false);
137
 
@@ -140,7 +162,7 @@
140
  handleSlide(event.clientX);
141
  });
142
 
143
- // Touch events
144
  slider.addEventListener('touchstart', () => isDragging = true);
145
  window.addEventListener('touchend', () => isDragging = false);
146
 
@@ -165,7 +187,7 @@
165
  function updateClipPath() {
166
  const rect = container.getBoundingClientRect();
167
  const sliderPosition = parseFloat(window.getComputedStyle(slider).left); // Get current slider position
168
- secondVideo.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
169
  requestAnimationFrame(updateClipPath); // Continuously call this function during animation
170
  }
171
 
@@ -181,5 +203,4 @@
181
  window.onload = () => updateClipPath();
182
  </script>
183
  </body>
184
-
185
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
84
  }
85
 
86
  .slider.ready:hover::before,
87
+ .slider.ready::after {
88
  opacity: 1;
89
  }
90
 
 
115
  }
116
  </style>
117
  </head>
 
118
  <body>
119
  <div class="video-container" id="videoContainer">
120
  <video id="video1" src="flir_brain_padded.mp4" playsinline autoplay loop muted></video>
 
125
  <script>
126
  const slider = document.getElementById('slider');
127
  const container = document.getElementById('videoContainer');
128
+ const video1 = document.getElementById('video1');
129
+ const video2 = document.getElementById('video2');
130
 
131
  let isDragging = false;
132
 
133
+ // Sync the videos: Play, Pause, and Seek Events
134
+ function syncVideos(video) {
135
+ video1.currentTime = video.currentTime;
136
+ video2.currentTime = video.currentTime;
137
+
138
+ if (video.paused) {
139
+ video1.pause();
140
+ video2.pause();
141
+ } else {
142
+ video1.play();
143
+ video2.play();
144
+ }
145
+ }
146
+
147
+ // Event listeners for video synchronization
148
+ video1.addEventListener('play', () => syncVideos(video1));
149
+ video1.addEventListener('pause', () => syncVideos(video1));
150
+ video1.addEventListener('seeked', () => syncVideos(video1));
151
+
152
+ video2.addEventListener('play', () => syncVideos(video2));
153
+ video2.addEventListener('pause', () => syncVideos(video2));
154
+ video2.addEventListener('seeked', () => syncVideos(video2));
155
+
156
+ // Mouse events for slider
157
  slider.addEventListener('mousedown', () => isDragging = true);
158
  window.addEventListener('mouseup', () => isDragging = false);
159
 
 
162
  handleSlide(event.clientX);
163
  });
164
 
165
+ // Touch events for slider
166
  slider.addEventListener('touchstart', () => isDragging = true);
167
  window.addEventListener('touchend', () => isDragging = false);
168
 
 
187
  function updateClipPath() {
188
  const rect = container.getBoundingClientRect();
189
  const sliderPosition = parseFloat(window.getComputedStyle(slider).left); // Get current slider position
190
+ video2.style.clipPath = `inset(0 ${rect.width - sliderPosition}px 0 0)`;
191
  requestAnimationFrame(updateClipPath); // Continuously call this function during animation
192
  }
193
 
 
203
  window.onload = () => updateClipPath();
204
  </script>
205
  </body>
 
206
  </html>