-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (151 loc) · 5.97 KB
/
index.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
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next-Sync with Plyr and HLS</title>
<!-- Video Together Script -->
<script src="https://fastly.jsdelivr.net/gh/VideoTogether/VideoTogether@latest/release/extension.website.user.js"></script>
<!-- DaisyUI and TailwindCSS -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Plyr CSS -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />
<!-- hls.js -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- External Stylesheet -->
<link rel="stylesheet" href="styles.css">
<style>
/* Make Plyr responsive */
video {
width: 100%;
max-width: 90vw;
max-height: 60vh;
object-fit: contain;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center">
<div class="flex flex-col items-center gap-4">
<!-- Logo -->
<h1 class="text-4xl font-bold text-primary">Next-Sync</h1>
<!-- Theme Toggle -->
<label class="grid cursor-pointer place-items-center">
<input
type="checkbox"
id="themeToggle"
class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
/>
<svg
class="stroke-base-100 fill-base-100 col-start-1 row-start-1"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="5" />
<path
d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
</svg>
<svg
class="stroke-base-100 fill-base-100 col-start-2 row-start-1"
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</label>
<!-- Video URL input and Play Link button -->
<input
id="videoUrl"
type="url"
placeholder="Enter Video URL"
class="input input-bordered input-primary w-full max-w-xs"
/>
<button id="playLinkButton" class="btn btn-primary w-full max-w-xs mt-2">Play Link</button>
<!-- File input for selecting a video -->
<label class="btn btn-secondary w-full max-w-xs mt-2">
<input
id="mediaFile"
type="file"
accept="video/*,audio/*"
class="file-input hidden"
/>
Select Video File
</label>
<!-- Plyr Video Element -->
<video id="player" controls playsinline></video>
</div>
<script src="https://cdn.plyr.io/3.6.12/plyr.polyfilled.js"></script>
<script>
// Theme toggle functionality
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('change', () => {
document.documentElement.setAttribute('data-theme', themeToggle.checked ? 'synthwave' : 'dark');
});
// Initialize Plyr
const videoElement = document.getElementById('player');
const player = new Plyr(videoElement);
const videoUrlInput = document.getElementById('videoUrl');
const mediaFileInput = document.getElementById('mediaFile');
const playLinkButton = document.getElementById('playLinkButton');
// Function to load HLS or regular video source
function loadVideo(url) {
// Check if the video URL is an HLS stream (ends with .m3u8)
if (Hls.isSupported() && url.endsWith(".m3u8")) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
player.play();
});
} else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
// Native HLS support (e.g., Safari)
videoElement.src = url;
videoElement.addEventListener("loadedmetadata", () => {
player.play();
});
} else {
// For non-HLS URLs, fallback to Plyr's standard handling
player.source = {
type: 'video',
sources: [
{
src: url,
type: 'video/mp4', // Default to mp4 for non-HLS
},
],
};
player.play();
}
}
// Play Link button event listener
playLinkButton.addEventListener('click', () => {
const mediaUrl = videoUrlInput.value;
if (mediaUrl) {
loadVideo(mediaUrl);
} else {
alert("Please enter a valid video URL.");
}
});
// Load media from selected file
mediaFileInput.addEventListener('change', () => {
const file = mediaFileInput.files[0];
if (file) {
const mediaUrl = URL.createObjectURL(file);
loadVideo(mediaUrl);
}
});
</script>
</body>
</html>