-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathvidstack.html
95 lines (84 loc) · 2.48 KB
/
vidstack.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vidstack Video Player</title>
<link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css">
<link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
vds-player {
width: 100vw;
height: 100vh;
background: #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<vds-player id="player"></vds-player>
</div>
<script src="https://cdn.vidstack.io/player" type="module"></script>
<script src="https://cdn.vidstack.io/player.dev" type="module"></script>
<script src="https://cdn.vidstack.io/[email protected]" type="module"></script>
<script type="module">
import { VidstackPlayer, VidstackPlayerLayout } from 'https://cdn.vidstack.io/player';
function getUrlParams() {
const params = new URLSearchParams(window.location.search);
return {
id: params.get('id')
};
}
async function fetchVideoData(id) {
const response = await fetch(`https://api-p1xr.vercel.app/api/v2/stream/${id}`);
const data = await response.json();
return data;
}
async function initializePlayer() {
const params = getUrlParams();
const data = await fetchVideoData(params.id);
const mainStream = data.stream.multi.main.url;
const backupStream = data.stream.multi.backup.url;
const thumbnailTrack = data.stream.tracks;
const player = await VidstackPlayer.create({
target: '#player',
title: data.info.title,
src: mainStream,
poster: '',
layout: new VidstackPlayerLayout({
thumbnails: thumbnailTrack ? thumbnailTrack : '',
}),
});
// Event listeners for play and pause
player.addEventListener('play', () => {
console.log('Video is playing');
});
player.addEventListener('pause', () => {
console.log('Video is paused');
});
// Add settings menu for switching between main and backup streams
player.settings = [
{
html: 'Stream',
selector: [
{ html: 'Main', url: mainStream, default: true },
{ html: 'Backup', url: backupStream },
],
onSelect: function (item) {
player.src = item.url;
return item.html;
},
},
];
}
// Initialize player
initializePlayer();
</script>
</body>
</html>