-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclips.html
98 lines (91 loc) · 4.16 KB
/
clips.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 lang="en">
<head>
<meta charset="UTF-8">
<title>Random Clip Player</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript">
$(document).ready(function() {
const urlParams = new URLSearchParams(window.location.search);
const streamerName = urlParams.get('streamerName') || "";
const timeframe = urlParams.get('duration') || "";
const baseUrl = `https://kick.com/api/v2/channels/${streamerName}/clips?sort=date&time=${timeframe}`;
const maxPages = 5;
let allClips = [];
let cursor = '0';
let firstBatchLoaded = false;
function fetchClips(page) {
if (page > maxPages || !cursor) {
console.log('No more pages to fetch or no cursor available.');
if (!firstBatchLoaded && allClips.length > 0) {
firstBatchLoaded = true;
playRandomClip();
}
return;
}
const apiUrl = `${baseUrl}&cursor=${cursor}`;
console.log(`Fetching page: ${page} from URL: ${apiUrl}`);
$.getJSON(apiUrl, function(data) {
if (data.clips && data.clips.length > 0) {
console.log(`Fetched ${data.clips.length} clips from page ${page}`);
allClips = allClips.concat(data.clips);
cursor = data.nextCursor || '';
if (!firstBatchLoaded) {
firstBatchLoaded = true;
playRandomClip();
}
fetchClips(page + 1);
} else {
console.log('No clips found in current batch.');
if (!firstBatchLoaded && allClips.length > 0) {
firstBatchLoaded = true;
playRandomClip();
} else {
console.error('No clips found.');
}
}
}).fail(function() {
console.error('Error fetching clip data.');
});
}
function playRandomClip() {
console.log('All clips data:', allClips);
if (allClips.length > 0) {
const randomIndex = Math.floor(Math.random() * allClips.length);
const clip = allClips[randomIndex];
console.log('Playing clip:', clip);
if (clip && clip.clip_url) {
const videoPlayer = document.getElementById('clipPlayer');
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(clip.clip_url);
hls.attachMedia(videoPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
videoPlayer.play();
});
} else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
videoPlayer.src = clip.clip_url;
videoPlayer.play();
} else {
console.error('HLS is not supported in this browser.');
}
videoPlayer.onended = function() {
playRandomClip();
};
} else {
console.error('Invalid clip data.');
}
} else {
console.error('No clips available to play.');
}
}
// Start fetching clips
fetchClips(1);
});
</script>
</head>
<body>
<video id="clipPlayer" width="100%" controls></video>
</body>
</html>