Skip to content

Commit 29de6de

Browse files
kyle8998kyle8998
committed
HTML5 Player Foundation
Began inital integration of html5 player. Currently not functional at all. In testing phase.
1 parent a9abd67 commit 29de6de

File tree

6 files changed

+218
-11
lines changed

6 files changed

+218
-11
lines changed

‎css/html5player.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@font-face {
2+
font-family: 'HeydingsControlsRegular';
3+
src: url('fonts/heydings_controls-webfont.eot');
4+
src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/heydings_controls-webfont.woff') format('woff'), url('fonts/heydings_controls-webfont.ttf') format('truetype');
5+
font-weight: normal;
6+
font-style: normal;
7+
}
8+
9+
.controls {
10+
visibility: hidden;
11+
opacity: 0.5;
12+
width: 400px;
13+
border-radius: 10px;
14+
position: absolute;
15+
bottom: 20px;
16+
left: 50%;
17+
margin-left: -200px;
18+
background-color: black;
19+
box-shadow: 3px 3px 5px black;
20+
transition: 1s all;
21+
display: flex;
22+
}
23+
24+
.html5video {
25+
/* width: 640;
26+
height: 360; */
27+
}
28+
29+
#html5-input {
30+
display: none;
31+
}
32+
33+
.html5player:hover .controls, html5player:focus .controls {
34+
opacity: 1;
35+
}
36+
37+
.html5button:before {
38+
font-family: HeydingsControlsRegular;
39+
font-size: 20px;
40+
position: relative;
41+
content: attr(data-icon);
42+
color: #aaa;
43+
text-shadow: 1px 1px 0px black;
44+
}
45+
46+
.timer {
47+
line-height: 38px;
48+
font-size: 10px;
49+
font-family: monospace;
50+
text-shadow: 1px 1px 0px black;
51+
color: white;
52+
flex: 5;
53+
position: relative;
54+
}
55+
56+
.timer div {
57+
position: absolute;
58+
background-color: rgba(255,255,255,0.2);
59+
left: 0;
60+
top: 0;
61+
width: 0;
62+
height: 38px;
63+
z-index: 2;
64+
}
65+
66+
.timer span {
67+
position: absolute;
68+
z-index: 3;
69+
left: 19px;
70+
}

‎css/style.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
display: none;
2020
}
2121

22+
#HTML5Area {
23+
display: none;
24+
}
25+
2226
#page {
2327
display: none;
2428
}

‎index.html

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727

2828
<link href="css/style.css" rel="stylesheet">
2929
<link href="css/mobile-style.css" rel="stylesheet">
30+
<link href="css/html5player.css" rel="stylesheet">
3031

3132
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
3233
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon-96x96.png">
@@ -120,6 +121,7 @@ <h2> Join a Room! </h2>
120121
<a class="dropdown-item" onclick="changePlayer(roomnum, 0)"><i class="fab fa-youtube"></i> YouTube</a>
121122
<a class="dropdown-item" onclick="changePlayer(roomnum, 1)"><img width="14px" height="14px" src="img/dailymotion-logo.svg" alt="Daily Motion Logo"> Daily Motion</a>
122123
<a class="dropdown-item" onclick="changePlayer(roomnum, 2)"><i class="fab fa-vimeo"></i> Vimeo</a>
124+
<a class="dropdown-item" onclick="changePlayer(roomnum, 3)"><i class="fas fa-file-video"></i> HTML5 Player (Not Working Yet!)</a>
123125
</div>
124126
</div>
125127

@@ -143,38 +145,58 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
143145
<div id='vimeoArea'>
144146
<iframe class="video" id="player-vimeo" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
145147
</div>
148+
<div id='HTML5Area'>
149+
<div class="html5player">
150+
<video width="640" height="360" class="video html5video" id="html5src" controls>
151+
<!-- <source src="video/sintel-short.mp4" type="video/mp4">
152+
<source src="video/sintel-short.webm" type="video/webm"> -->
153+
<!-- fallback content here -->
154+
</video>
155+
<div class="controls">
156+
<button class="html5button play" data-icon="P" aria-label="play pause toggle"></button>
157+
<button class="html5button stop" data-icon="S" aria-label="stop"></button>
158+
<div class="timer">
159+
<div></div>
160+
<span aria-label="timer">00:00</span>
161+
</div>
162+
<button class="html5button rwd" data-icon="B" aria-label="rewind"></button>
163+
<button class="html5button fwd" data-icon="F" aria-label="fast forward"></button>
164+
</div>
165+
</div>
166+
</div>
146167

147168
<!----------------------------------- PLAYER AREA ----------------------------------->
148169
<!-- <hr> -->
149170
<div>
150-
<button onclick="playVideo(roomnum)" style="margin-top:.5rem" class="btn btn-primary"><i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause</button>
171+
<button id="playButton" onclick="playVideo(roomnum)" style="margin-top:.5rem" class="btn btn-primary"><i class="fa fa-play"></i> Play / <i class="fa fa-pause"></i> Pause</button>
151172

152173
<button id="syncbutton" onclick="syncVideo(roomnum);syncAlert()" style="margin-top:.5rem" class="btn btn-primary"><i class="fa fa-sync"></i> Sync</button>
153174

154-
<button onclick="loveLive(roomnum)" style="margin-top:.5rem" class="btn btn-primary"><i class="far fa-heart"></i> Random K-pop</button>
175+
<button id="loveButton" onclick="loveLive(roomnum)" style="margin-top:.5rem" class="btn btn-primary"><i class="far fa-heart"></i> Random K-pop</button>
155176
<!-- <br/> -->
156177
<button id="hostbutton" onclick="changeHost(roomnum)" style="margin-top:.5rem" class="btn btn-primary"><i class="fas fa-users"></i> Make me the host!</button>
157178
<!-- Turn off the lights -->
158-
<button style="margin-top:.5rem" class="btn btn-primary switch"><i style="pointer-events:none;" class="fas fa-lightbulb"></i></button>
179+
<button id="lightButton" style="margin-top:.5rem" class="btn btn-primary switch"><i style="pointer-events:none;" class="fas fa-lightbulb"></i></button>
159180
</div>
160181

161182
<!-- Div for lights off! -->
162183
<div id='persoff'></div>
163184

164185
<div class="topbotmargins">
165186
<input type="Video" style="max-width: 200px; margin-right: .5rem; margin-bottom: .5rem; float: left;" class="form-control" id="inputVideoId" placeholder="Video ID">
166-
<button onclick="enqueueVideo(roomnum)" class="btn btn-primary"><i class="fas fa-plus"></i> Add to Queue</button>
167-
<button onclick="emptyQueue(roomnum)" class="btn btn-primary"><i class="fas fa-trash"></i> Empty Queue</button>
187+
<button id="enqueueButton" onclick="enqueueVideo(roomnum)" class="btn btn-primary"><i class="fas fa-plus"></i> Add to Queue</button>
188+
<button id="emptyButton" onclick="emptyQueue(roomnum)" class="btn btn-primary"><i class="fas fa-trash"></i> Empty Queue</button>
168189
</div>
169190
<div>
170191
<!-- <a class="ghost-button-full-color"><i class="far fa-times-circle"></i></a> -->
171-
<button onclick="changeVideo(roomnum)" class="btn btn-primary"><i class="fas fa-exchange-alt"></i> Change Video</button>
172-
<button onclick="prevVideo(roomnum)" class="btn btn-primary"><i class="fas fa-step-backward"></i> Previous</button>
173-
<button onclick="playNext(roomnum)" class="btn btn-primary"><i class="fas fa-step-forward"></i> Next</button>
192+
<button id="changeButton" onclick="changeVideo(roomnum)" class="btn btn-primary"><i class="fas fa-exchange-alt"></i> Change Video</button>
193+
<button id="previousButton" onclick="prevVideo(roomnum)" class="btn btn-primary"><i class="fas fa-step-backward"></i> Previous</button>
194+
<button id="nextButton" onclick="playNext(roomnum)" class="btn btn-primary"><i class="fas fa-step-forward"></i> Next</button>
174195

175196
<br/>
176-
</div>
177197

198+
</div>
199+
<!-- <input type="file" id="html5-input" /> -->
178200
<!-- Playlist shit -->
179201
<div id="visual-queue" class="vid-list-container">
180202
<ul class="vid-list" id="vidlist">
@@ -198,7 +220,12 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
198220
</div>
199221
</div>
200222
<br/>
201-
<p style="display: none" id="beta-message" class="lead">Queue is currently in beta for DailyMotion/Vimeo</p>
223+
224+
<!-- HTML5 player input -->
225+
<input type="file" id="html5-input" />
226+
227+
<p style="display: none" id="html5-message" class="lead">HTML5 Player synchronization is not yet supported</p>
228+
<p style="display: none" id="beta-message" class="lead">Queue is currently only supported by YouTube</p>
202229

203230

204231

@@ -692,6 +719,8 @@ <h2>Contact Me</h2>
692719
<!-- Vimeo -->
693720
<script src="https://player.vimeo.com/api/player.js"></script>
694721
<script src="js/vimeo.js"></script>
722+
<!-- HTML5 Player -->
723+
<script src="js/html5.js"></script>
695724

696725
</body>
697726

‎js/html5.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Read in video input
2+
var html5input = document.getElementById('html5-input');
3+
html5input.onchange = function(e) {
4+
var html5 = document.getElementById('html5src');
5+
html5.src = URL.createObjectURL(this.files[0]);
6+
// not really needed in this exact case, but since it is really important in other cases,
7+
// don't forget to revoke the blobURI when you don't need it
8+
html5.onend = function(e) {
9+
URL.revokeObjectURL(this.src);
10+
}
11+
}
12+
13+
var media = document.querySelector('video');
14+
// var controls = document.querySelector('.controls');
15+
//
16+
// var play = document.querySelector('.play');
17+
// var stop = document.querySelector('.stop');
18+
// var rwd = document.querySelector('.rwd');
19+
// var fwd = document.querySelector('.fwd');
20+
//
21+
// var timerWrapper = document.querySelector('.timer');
22+
// var timer = document.querySelector('.timer span');
23+
// var timerBar = document.querySelector('.timer div');
24+
//
25+
// media.removeAttribute('controls');
26+
// controls.style.visibility = 'visible';
27+
28+
// play.addEventListener('click', playPauseMedia);
29+
30+
function playPauseMedia() {
31+
if (media.paused) {
32+
play.setAttribute('data-icon', 'u');
33+
media.play();
34+
} else {
35+
play.setAttribute('data-icon', 'P');
36+
media.pause();
37+
}
38+
}

‎js/player.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ socket.on('getPlayerData', function(data) {
6565

6666
// Create Youtube Player
6767
socket.on('createYoutube', function(data) {
68+
media.pause()
6869
if (currPlayer != 0) {
6970
// var playerIn = document.getElementById("playerArea")
7071
// console.log(playerIn.innerHTML)
@@ -77,6 +78,9 @@ socket.on('createYoutube', function(data) {
7778
var vimeo = document.getElementById('vimeoArea');
7879
vimeo.style.display = 'none';
7980

81+
var html5 = document.getElementById('HTML5Area');
82+
html5.style.display = 'none';
83+
8084
var you = document.getElementById('playerArea');
8185
you.style.display = 'block';
8286
currPlayer = 0
@@ -85,6 +89,12 @@ socket.on('createYoutube', function(data) {
8589
document.getElementById('visual-queue').style.display = 'block'
8690
document.getElementById('queue-arrows').style.display = 'block'
8791
document.getElementById('beta-message').style.display = 'none'
92+
document.getElementById('enqueueButton').style.display = 'inline-block'
93+
document.getElementById('emptyButton').style.display = 'inline-block'
94+
document.getElementById('nextButton').style.display = 'inline-block'
95+
document.getElementById('html5-input').style.display = 'none'
96+
97+
document.getElementById('html5-message').style.display = 'none'
8898

8999
console.log("Player state: " + playerStatus)
90100
// If it is -1, there was an error and needs to resync to host
@@ -102,6 +112,7 @@ socket.on('createYoutube', function(data) {
102112

103113
// Create Daily Motion Player
104114
socket.on('createDaily', function(data) {
115+
media.pause()
105116
console.log("i am in create daily")
106117
// player.destroy()
107118
if (currPlayer != 1) {
@@ -115,6 +126,9 @@ socket.on('createDaily', function(data) {
115126
var vimeo = document.getElementById('vimeoArea');
116127
vimeo.style.display = 'none';
117128

129+
var html5 = document.getElementById('HTML5Area');
130+
html5.style.display = 'none';
131+
118132
var daily = document.getElementById('dailyArea');
119133
daily.style.display = 'block';
120134
currPlayer = 1
@@ -123,6 +137,12 @@ socket.on('createDaily', function(data) {
123137
document.getElementById('visual-queue').style.display = 'none'
124138
document.getElementById('queue-arrows').style.display = 'none'
125139
document.getElementById('beta-message').style.display = 'block'
140+
document.getElementById('enqueueButton').style.display = 'none'
141+
document.getElementById('emptyButton').style.display = 'none'
142+
document.getElementById('nextButton').style.display = 'none'
143+
document.getElementById('html5-input').style.display = 'none'
144+
145+
document.getElementById('html5-message').style.display = 'none'
126146

127147
// Special call to pause youtube player
128148
// Only have to do on youtube player as it is the default player that autoplays
@@ -132,6 +152,7 @@ socket.on('createDaily', function(data) {
132152

133153
// Create Vimeo Player
134154
socket.on('createVimeo', function(data) {
155+
media.pause()
135156
if (currPlayer != 2) {
136157
// var playerIn = document.getElementById("playerArea")
137158
// console.log(playerIn.innerHTML)
@@ -143,6 +164,9 @@ socket.on('createVimeo', function(data) {
143164
var daily = document.getElementById('dailyArea');
144165
daily.style.display = 'none';
145166

167+
var html5 = document.getElementById('HTML5Area');
168+
html5.style.display = 'none';
169+
146170
var vimeo = document.getElementById('vimeoArea');
147171
vimeo.style.display = 'block';
148172
currPlayer = 2
@@ -151,13 +175,52 @@ socket.on('createVimeo', function(data) {
151175
document.getElementById('visual-queue').style.display = 'none'
152176
document.getElementById('queue-arrows').style.display = 'none'
153177
document.getElementById('beta-message').style.display = 'block'
178+
document.getElementById('enqueueButton').style.display = 'none'
179+
document.getElementById('emptyButton').style.display = 'none'
180+
document.getElementById('nextButton').style.display = 'none'
181+
document.getElementById('html5-input').style.display = 'none'
182+
183+
document.getElementById('html5-message').style.display = 'none'
154184

155185
// Special call to pause youtube player
156186
// Only have to do on youtube player as it is the default player that autoplays
157187
player.pauseVideo();
158188
}
159189
});
160190

191+
// Create HTML5 Player
192+
socket.on('createHTML5', function(data) {
193+
console.log("55555")
194+
console.log(currPlayer)
195+
if (currPlayer != 3) {
196+
197+
var you = document.getElementById('playerArea');
198+
you.style.display = 'none';
199+
200+
var daily = document.getElementById('dailyArea');
201+
daily.style.display = 'none';
202+
203+
var vimeo = document.getElementById('vimeoArea');
204+
vimeo.style.display = 'none';
205+
206+
var html5 = document.getElementById('HTML5Area');
207+
html5.style.display = 'block';
208+
currPlayer = 3
209+
210+
211+
document.getElementById('visual-queue').style.display = 'none'
212+
document.getElementById('queue-arrows').style.display = 'none'
213+
document.getElementById('beta-message').style.display = 'block'
214+
document.getElementById('enqueueButton').style.display = 'none'
215+
document.getElementById('emptyButton').style.display = 'none'
216+
document.getElementById('nextButton').style.display = 'none'
217+
document.getElementById('html5-input').style.display = 'block'
218+
219+
document.getElementById('html5-message').style.display = 'block'
220+
221+
}
222+
});
223+
161224

162225
// changeSinglePlayer(roomnum, playerId){
163226
//

‎server.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -590,7 +590,7 @@ io.sockets.on('connection', function(socket) {
590590
var playerId = data.playerId
591591

592592
io.sockets.in("room-" + roomnum).emit('pauseVideoClient');
593-
593+
console.log(playerId)
594594
switch (playerId) {
595595
case 0:
596596
io.sockets.in("room-" + roomnum).emit('createYoutube', {});
@@ -601,6 +601,9 @@ io.sockets.on('connection', function(socket) {
601601
case 2:
602602
io.sockets.in("room-" + roomnum).emit('createVimeo', {});
603603
break;
604+
case 3:
605+
io.sockets.in("room-" + roomnum).emit('createHTML5', {});
606+
break;
604607
default:
605608
console.log("Error invalid player id")
606609
}

0 commit comments

Comments
 (0)