Initial commit.
This commit is contained in:
commit
8682585ef9
2 changed files with 254 additions and 0 deletions
61
index.html
Normal file
61
index.html
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SyncVid</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
body {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: black;
|
||||
}
|
||||
.video-container {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
.syncing {
|
||||
cursor: wait;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Grid layouts based on video count */
|
||||
.video-container.count-1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.video-container.count-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.video-container.count-3 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
.video-container.count-3 > video:first-child {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.video-container.count-4 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="videoContainer" class="video-container">
|
||||
<!-- Videos will be added here by JavaScript -->
|
||||
</div>
|
||||
<script src="syncvid.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
193
syncvid.js
Normal file
193
syncvid.js
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
// issues: initial load fails when syncpoints match, init syncedvideos by checking actual time; unpausing video should also sync; sync max syncpoint
|
||||
|
||||
const videos = [
|
||||
{
|
||||
url: "vids/test.mp4",
|
||||
syncPoint: 10,
|
||||
},
|
||||
{
|
||||
url: "vids/test.mp4",
|
||||
syncPoint: 60 + 10,
|
||||
},
|
||||
{
|
||||
url: "vids/test.mp4",
|
||||
syncPoint: 120 + 10,
|
||||
},
|
||||
];
|
||||
|
||||
let videoElements = [];
|
||||
|
||||
// Initialize the video grid
|
||||
function initializeVideos() {
|
||||
const container = document.getElementById("videoContainer");
|
||||
|
||||
// Set the appropriate grid class based on video count
|
||||
container.classList.add(`count-${videos.length}`);
|
||||
|
||||
videos.forEach((videoConfig, index) => {
|
||||
const videoElement = document.createElement("video");
|
||||
videoElement.src = videoConfig.url;
|
||||
videoElement.controls = true;
|
||||
videoElement.dataset.index = index;
|
||||
videoElement.preload = "auto";
|
||||
|
||||
videoElement.volume = 1 / videos.length;
|
||||
|
||||
container.appendChild(videoElement);
|
||||
videoElements.push(videoElement);
|
||||
|
||||
// Add event listeners
|
||||
videoElement.addEventListener("play", onPlay);
|
||||
videoElement.addEventListener("pause", onPause);
|
||||
videoElement.addEventListener("seeked", onSeek);
|
||||
videoElement.addEventListener("timeupdate", onTimeUpdate);
|
||||
videoElement.addEventListener("loadeddata", () => {
|
||||
console.log("Video loaded:", videoElement.dataset.index);
|
||||
});
|
||||
});
|
||||
|
||||
// Initial sync when videos are loaded
|
||||
const minSyncVideoIndex = videos.reduce((minIndex, video, index) => {
|
||||
if (video.syncPoint < videos[minIndex].syncPoint) {
|
||||
return index;
|
||||
}
|
||||
return minIndex;
|
||||
}, 0);
|
||||
|
||||
syncAllVideos(
|
||||
videoElements[minSyncVideoIndex],
|
||||
-videos[minSyncVideoIndex].syncPoint
|
||||
);
|
||||
syncing = false;
|
||||
}
|
||||
|
||||
function onPlay(event) {
|
||||
console.log("Received play event from", event.target.dataset.index);
|
||||
console.log("Playing all videos");
|
||||
const relativeTime =
|
||||
event.target.currentTime - videos[event.target.dataset.index].syncPoint;
|
||||
for (const videoElement of videoElements) {
|
||||
if (
|
||||
videoElement.currentTime < videoElement.duration - 1 &&
|
||||
relativeTime + videos[videoElement.dataset.index].syncPoint > 0
|
||||
) {
|
||||
videoElement.play();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onPause(event) {
|
||||
console.log("Received pause event from", event.target.dataset.index);
|
||||
if (syncing) {
|
||||
console.log(
|
||||
"Ignoring pause event while syncing from",
|
||||
event.target.dataset.index
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (event.target.currentTime > event.target.duration - 1) {
|
||||
console.log(" Video ended naturally.");
|
||||
return;
|
||||
} else {
|
||||
console.log(" Pausing all videos");
|
||||
|
||||
for (const videoElement of videoElements) {
|
||||
if (videoElement === event.target) {
|
||||
continue;
|
||||
}
|
||||
videoElement.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let syncing = false;
|
||||
let syncedVideos = [];
|
||||
|
||||
function onSeek(event) {
|
||||
console.log(
|
||||
"Received seeked event from",
|
||||
event.target.dataset.index,
|
||||
"at",
|
||||
event.target.currentTime
|
||||
);
|
||||
|
||||
if (syncing) {
|
||||
if (syncedVideos.includes(event.target.dataset.index)) {
|
||||
console.log(" Already synced");
|
||||
return;
|
||||
}
|
||||
syncedVideos.push(event.target.dataset.index);
|
||||
if (syncedVideos.length === videoElements.length) {
|
||||
console.log("Syncing complete");
|
||||
syncing = false;
|
||||
document.body.classList.remove("syncing");
|
||||
}
|
||||
return;
|
||||
} else {
|
||||
console.log(" Received seek while not syncing, starting sync");
|
||||
const syncPoint = videos[event.target.dataset.index].syncPoint;
|
||||
const relativeTime = event.target.currentTime - syncPoint;
|
||||
syncAllVideos(event.target, relativeTime);
|
||||
}
|
||||
}
|
||||
|
||||
function syncAllVideos(sourceVideoElement, relativeTime) {
|
||||
syncing = true;
|
||||
document.body.classList.add("syncing");
|
||||
syncedVideos = [sourceVideoElement.dataset.index];
|
||||
console.log(
|
||||
"Syncing all videos from",
|
||||
sourceVideoElement.dataset.index,
|
||||
"at",
|
||||
sourceVideoElement.currentTime
|
||||
);
|
||||
for (const videoElement of videoElements) {
|
||||
if (videoElement === sourceVideoElement) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const syncedTime =
|
||||
relativeTime + videos[videoElement.dataset.index].syncPoint;
|
||||
|
||||
if (syncedTime < 0) {
|
||||
videoElement.currentTime = 0;
|
||||
videoElement.pause();
|
||||
} else if (
|
||||
syncedTime >
|
||||
videos[videoElement.dataset.index].duration -
|
||||
videos[videoElement.dataset.index].syncPoint
|
||||
) {
|
||||
videoElement.currentTime = videos[videoElement.dataset.index].duration;
|
||||
} else {
|
||||
videoElement.currentTime = syncedTime;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onTimeUpdate(event) {
|
||||
if (syncing || event.target.paused) {
|
||||
return;
|
||||
}
|
||||
|
||||
const relativeTime =
|
||||
event.target.currentTime - videos[event.target.dataset.index].syncPoint;
|
||||
|
||||
for (const videoElement of videoElements) {
|
||||
if (
|
||||
videoElement.paused &&
|
||||
relativeTime + videos[videoElement.dataset.index].syncPoint > 0
|
||||
) {
|
||||
console.log(
|
||||
"Reached sync point for",
|
||||
videoElement.dataset.index,
|
||||
"- playing"
|
||||
);
|
||||
videoElement.play();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize everything when the page loads
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeVideos();
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue