-
Notifications
You must be signed in to change notification settings - Fork 1
/
booth_live.html
119 lines (104 loc) · 3.9 KB
/
booth_live.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"
type="text/javascript" charset="utf-8"></script>
<script
src="http://www.cmukgb.org/activities/booth-cam/jquery.jcountdown.min.js"
type="text/javascript" charset="utf-8"></script>
<script src="https://www.youtube.com/player_api"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#counter').countdown({
"date": new Date("13 April 2023 15:00:00 -0400"),
"htmlTemplate":
"Carnival starts in <br/>%d days %h hours %i mins %s sec!"
});
});
// This code loads the IFrame Player API code asynchronously.
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '5760',
height: '3240',
videoId: 'mJqoEQJ6BUw',
playerVars: { 'controls' : 0, 'rel' : 0, 'showinfo' : 0, 'autoplay' : 1, 'mute' : 1 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
// It may not work for any given device, but it's worth a shot.
playVideo();
}
function onPlayerStateChange(event) {
var button = document.getElementById("play-button");
if (event.data != YT.PlayerState.PAUSED) {
button.innerHTML = "Pause live video";
button.onclick = pauseVideo;
}
else {
button.innerHTML = "Resume live video";
button.onclick = playVideo;
}
}
function playVideo() {
player.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
</script>
<style>
body { background-color: #FFFFFF; }
#counter { color: black; float: left; width: 250px; padding-left: 30px;
font-weight: bold; font-family: sans-serif; font-size:15px; }
h1 { color: #000000; font-family:sans-serif; padding-left: 30px;
float: left; margin-top: 10px; margin-bottom: 40px; }
h2 { color: #000000 !important; padding-left: 10px; font-family:
sans-serif; display: inline; float: left; margin-top: 60px;
margin-bottom: -30px; }
h4 { color: #000000; font-family: sans-serif; padding-left: 30px;
padding-top: 60px; float: left; text-align: left; width: 250px;
margin: 0; }
button { font-family: sans-serif; font-size: 20px; padding: 0.5em; }
</style>
<style type="text/css"></style>
</head>
<body style="width:1000px;">
<div id="cam" style="float: left; width: 700px; height: 700px;
border: thick solid #666666; overflow: hidden; position: relative;">
<iframe id="player" width='5760' height='3240'
src='https://www.youtube.com/embed/mJqoEQJ6BUw?enablejsapi=1&origin=http://booth.cmukgb.org&controls=0&rel=0&showinfo=0&mute=1'
frameborder='0'
style='position: absolute; top: -650px; left: -3100px;'>
</iframe>
</div>
<img
src="https://www.cmukgb.org/wp-content/uploads/2019/01/shield-1-1-e1548212759768.png"
style="padding-left: 60px; height: 300px;">
</br>
<h1>KGB Booth Cam</h1>
<div id="counter"></div>
</br>
<h4>
Live footage is courtesy of:
</br>
<a href="https://www.springcarnival.org/webcam.shtml" target="_blank">
www.springcarnival.org
</a>
</br>
Full cameras can be viewed there or on their
<a href="https://www.youtube.com/channel/UCU9POVg8y6XmdT_seh6nHDA" target="_blank">YouTube channel</a>.
</h4>
<h4 style="font-size:12px">
Video may not autoplay on mobile.
<button id="play-button" type="button" onclick="playVideo()">
Start live video
</button>
</h4>
</body>
</html>