This repository has been archived by the owner on Oct 26, 2022. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
189 lines (182 loc) · 7.43 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebTorrentPlayer Example</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="lib/webtorrent-player.css" rel="stylesheet">
<link rel="icon" type="image/png" href="docs/logo.png">
<style>
:root {
font-size: 12px;
}
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #141416;
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<span id=navNowPlaying></span>
<section id="player" class="torrent-player">
<video id="video" src=""></video>
<a href="#player" class="miniplayer"></a>
<div class="top">
<div data-name="nowPlaying" class="ctrl">
</div>
<div class='stats'>
<span class="ctrl material-icons" data-value="0" data-name="peers">
people
</span>
<span class="ctrl material-icons" data-value="0 B/s" data-name="downSpeed">
arrow_downward
</span>
<span class="ctrl material-icons" data-value="0 B/s" data-name="upSpeed">
arrow_upward
</span>
</div>
<a class="material-icons ctrl" title="Save File To Drive" data-name="downloadFile" href="" target="_blank">
get_app
</a>
</div>
<div class="middle">
<div class="ctrl" data-name="ppToggle"></div>
<span class="material-icons ctrl" data-name="playLast">
skip_previous
</span>
<span class="material-icons ctrl" data-name="rewind">
fast_rewind
</span>
<span class="material-icons ctrl" data-name="playPause">
play_arrow
</span>
<span class="material-icons ctrl" data-name="forward">
fast_forward
</span>
<span class="material-icons ctrl" data-name="playNext">
skip_next
</span>
<div data-name="bufferingDisplay">
</div>
</div>
<div class="bottom">
<span class="material-icons ctrl" title="Play/Pause [Space]" data-name="playPause">
play_arrow
</span>
<span class="material-icons ctrl" title="Next [N]" data-name="playNext">
skip_next
</span>
<span class="material-icons ctrl" title="Playlist [P]" data-name="openPlaylist">
playlist_play
</span>
<div class="volume">
<span class="material-icons ctrl" title="Mute [M]" data-name="toggleMute">
volume_up
</span>
<input class="ctrl" type="range" value="100" id="volume" step="any" data-name="setVolume">
</div>
<div class="audio-tracks popup">
<span class="material-icons ctrl" title="Audio Tracks [T]" disabled data-name="audioButton">
queue_music
</span>
<div class="popup-menu ctrl" data-name="selectAudio">
</div>
</div>
<div class="ctrl" data-name="progressWrapper" data-elapsed="00:00" data-remaining="00:00">
<div>
<input class="ctrl" type="range" min="0" max="100" value="0" step="any" data-name="setProgress">
<img class="ctrl" data-elapsed="00:00" data-name="thumbnail">
</div>
</div>
<div class="subtitles popup">
<span class="material-icons ctrl" title="Subtitles [C]" disabled data-name="captionsButton">
subtitles
</span>
<div class="popup-menu ctrl" data-name="selectCaptions">
</div>
</div>
<span class="material-icons ctrl" title="Cast Video [P]" data-name="toggleCast" disabled>
cast
</span>
<span class="material-icons ctrl" title="Popout Window [P]" data-name="togglePopout">
picture_in_picture
</span>
<span class="material-icons ctrl" title="Theatre Mode [T]" data-name="toggleTheatre">
crop_16_9
</span>
<span class="material-icons ctrl" title="Fullscreen [F]" data-name="toggleFullscreen">
fullscreen
</span>
</div>
</section>
<button type="button" onclick=t(1)>Play Sintel</button>
<button type="button" onclick=t(2)>Play Tears Of Steel</button>
<button type="button" onclick=d(1)>Download and store Sintel</button>
<button type="button" onclick=d(2)>Download and store Tears Of Steel</button>
<input type="text" id='magn' placeholder="Magnet/Torrent">
<button type="button" onclick=client.playTorrent(magn.value)>Play Magnet/Torrent</button>
<script src="dist/bundle.js"></script>
<script>
const playerControls = {}
for (const item of document.getElementsByClassName('ctrl')) {
if (!playerControls[item.dataset.name]) {
playerControls[item.dataset.name] = item
} else {
playerControls[item.dataset.name] = [playerControls[item.dataset.name], item]
}
}
const client = new WebTorrentPlayer.default({
controls: playerControls,
video: video,
player: player,
burnIn: true,
seekTime: 2,
immerseTime: 10,
generateThumbnails: true,
visibilityLossPause: true
})
client.on('prev', params => console.log('User wants to play previous video!', params))
client.on('next', params => console.log('User wants to play next video!', params))
client.on('playlist', params => console.log('User wants to open playlist!', params))
client.on('watched', params => console.log('User watched current video!', params))
client.on('download-done', params => console.log('Player finished downloading a file!', params))
client.on('video-files', params => console.log('Player found video files!', params))
client.on('offline-torrent', params => console.log('Player loaded an offline stored torrent!', params))
client.on('no-files', params => console.error('Player couldnt find any playable video files!', params))
client.on('no-peers', params => console.error('Player couldnt find any peers!', params))
function d(a) {
switch (a) {
case 1:
client.offlineDownload('magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent')
break
case 2:
client.offlineDownload('magnet:?xt=urn:btih:209c8226b299b308beaf2b9cd3fb49212dbd13ec&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Ftears-of-steel.torrent')
break
case 3:
client.offlineDownload('magnet:?xt=urn:btih:CE9156EB497762F8B7577B71C0647A4B0C3423E1&tr=wss%3A%2F%2Ftracker.openwebtorrent.com')
break
}
}
function t(a) {
switch (a) {
case 1:
client.playTorrent('magnet:?xt=urn:btih:08ada5a7a6183aae1e09d831df6748d566095a10&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel.torrent')
break
case 2:
client.playTorrent('magnet:?xt=urn:btih:209c8226b299b308beaf2b9cd3fb49212dbd13ec&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Ftears-of-steel.torrent')
break
case 3:
client.playTorrent('magnet:?xt=urn:btih:CE9156EB497762F8B7577B71C0647A4B0C3423E1&tr=wss%3A%2F%2Ftracker.openwebtorrent.com')
break
}
}
</script>
</body>
</html>