-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (150 loc) · 5.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theo's cool site!</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<noscript>
<iframe src="./cantaloupe.html" style="background-color: white;position: absolute;top: 0;bottom: 0;width: 100vw;height: 100vh;z-index: 9999;">
</iframe>
</noscript>
<div id="container">
<div id="header" ><img src="./banner.png"></div>
<aside id="left">
<ul>
<li><a target="content" href="./main.html">Home</a></li>
<li><a target="content" href="./lnkme.html">Link me!</a></li>
<li><a target="content" href="./mybtns.html">My buttons</a></li>
<li><a target="content" href="./stuff.html">Stuff</a></li>
</ul>
<div style="text-align: center;background-color: #036630;" id="Music_Player">
<p style=" color: black;margin: 0;">Music Player</p>
<!-- This is for music ! -->
<div id="player"></div>
<div>
<button id="Music_PL">⏵</button>
<button id="Music_P">⏸</button>
<button id="Music_PR">⏮</button>
<button id="Music_N">⏭</button>
</div>
</div>
</aside>
<main>
<iframe id="content" name="content" src="./main.html" frameborder="0">
</iframe>
</main>
<aside id="right">
<h2>Buttons</h2>
<div class="content">
<!-- The Old Net Embed Code -->
<a href="http://www.theoldnet.com/#frombadge" title="Are you tired of this new Internet yet? Time to Get TheOldNet!">
<img src="http://www.theoldnet.com/images/theoldnetanimblur2.gif" width="88" height="31">
</a>
<!-- End The Old Net Embed Code -->
<a href='https://blinkies.cafe' target='_blank'><img src='https://blinkies.cafe/b/display/blinkiesCafe-badge.gif' alt='blinkies.cafe | make your own blinkies!'></a>
<a href="http://www.svencoop.com" target="_blank"><img src="http://scmapdb.wdfiles.com/local--files/site:images/svencoop.gif" alt="Sven Co-op" class="image"></a>
<h2>My links</h2>
<a href="https://github.com/home-gihub">Github</a>
<a href="https://steamcommunity.com/id/walterstoptryingtogetmysteamid/">Steam</a>
</aside>
</div>
</body>
<!-- This is for music ! -->
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// put video ids in the playlist array to add songs/videos (why would you watch a video in 100x100 res tho)
// Paper Airplane Chase DSiWare - Main Menu Theme
// Art of Balance Wii U - Title Screen Music
// Options - Mario Kart Wii
// Humming The Bassline
// Manuel - Gas Gas Gas
// James Shimoji - Pepsi Man Theme Song (ORIGINAL)
// Coconut Mall - Mario Kart Wii OST
// Spider-Man 2: The Game Pizza Theme
// Undertale OST - sans. Extended
// Can You Feel the Sunshine Resort Island) Sonic R Music Extended [Music OST][Original Soundtrack]
// Driftveil City - Pokémon Black & Pokémon White (OST)
var playlist = ["-a4jmu-lED0", "eRYLaRBK7YY", "xHV2n-0QMac", "IJYK5tkgtvk", "atuFSv2bLa8", "z54MpfR3XE4", "cscuCIzItZQ", "czTksCF6X8Y", "N1-RyLUQUrA", "ieMqJi6UOK8", "9hZ7gYB4E_c"]
// it starts at the 0th element
var currVid;
currVid = 0;
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100',
width: '100',
videoId: playlist[currVid],
playerVars: {
'playsinline': 1,
'controls':0,
'enablejsapi':1,
'disablekb':1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event == YT.PlayerState.ENDED) {
currVid = currVid + 1;
if (currVid > playlist.length) {
currVid = 0;
}
player.cueVideoById(playlist[currVid],0)
player.playVideo();
}
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
function getNextInPlaylistLoadAndPlay() {
currVid = currVid + 1
if (currVid > playlist.length) {
currVid = 0;
}
player.cueVideoById(playlist[currVid],0)
player.playVideo();
}
function getPrevInPlaylistLoadAndPlay() {
currVid = currVid + -1;
if (currVid < 0) {
currVid = playlist.length;
}
player.cueVideoById(playlist[currVid],0)
player.playVideo();
}
function stopVideo() {
player.stopVideo();
}
// buttons
/*
<button id="Music_PL">Play</button>
<button id="Music_P">Pause</button>
<button id="Music_N">Next</button>
<button id="Music_PR">Prev</button>
*/
document.getElementById("Music_PL").addEventListener("click", function(){
player.playVideo();
})
document.getElementById("Music_P").addEventListener("click", function(){
player.pauseVideo();
})
document.getElementById("Music_N").addEventListener("click", function(){
getNextInPlaylistLoadAndPlay();
})
document.getElementById("Music_PR").addEventListener("click", function(){
getPrevInPlaylistLoadAndPlay();
})
</script>
</html>