-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
150 lines (126 loc) · 4.71 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
<!--
Don't use the "5-unsafe" CDN version in your own code. It will break on you.
Instead go to videojs.com and copy the CDN urls for the latest version.
-->
<head>
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
<style>
body {
background: #091F2F;
text-align: center;
color: #E0E0E0;
/* height: 93.5%; */
margin: 0;
/* padding: 2em; */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
#full-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* for use with videoJS player
#video-container {
height: 100%;
border: none;
} */
#full-image {
display:block;
/* width: 100vw; */
height: 100vh;
object-fit: cover;
align-items: center;
}
.video-js {
height: 100% !important;
width: 100% !important;
border: none;
}
.vjs-fullscreen .vjs-tech {
border: none;
}
</style>
</head>
<body>
<img id="full-image" src="https://raw.githubusercontent.com/CityOfBoston/doit-welcome-board/main/welcomeSignTV.jpg" alt=" Welcome to the Department of Innovation and Technology!">
</body>
<!-- <div id="video-container"> -->
<!-- <video id="my_video_1" class="video-js vjs-default-skin" autoplay muted controls preload="auto" loop></video> -->
<!-- </div> -->
<!-- <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const videoContainer = 'my_video_1'
const repoOwner = 'CityOfBoston';
const repoName = 'doit-welcome-board';
const winFolderPath = 'wins';
const transitionFolderPath = 'transitions'
const state = {
winVideos: [],
transitionVideos: [],
currentWinIndex: 0,
currentTransitionIndex: 0,
isWinVideoNext: true
};
const player = videojs(videoContainer, { controls: false, autoplay: true, muted: true, loop: false, inactivityTimeout: 0 });
const fetchVideoFiles = async (folderPath) => {
try {
const response = await fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${folderPath}`);
const data = await response.json();
return data
.filter(file => file.type === 'file' && (file.name.endsWith('.mp4') || file.name.endsWith('.webm')))
.map(file => ({
src: file.download_url,
type: `video/${file.name.split('.').pop()}`
}));
} catch (error) {
console.error(`Error fetching video files from ${folderPath}:`, error);
return [];
}
};
const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);
const playNextVideo = () => {
const { isWinVideoNext, winVideos, transitionVideos } = state;
let videoSources = isWinVideoNext ? winVideos : transitionVideos;
let currentIndex = isWinVideoNext ? state.currentWinIndex : state.currentTransitionIndex;
if (videoSources.length === 0) {
console.error('No video sources available.');
return;
}
const videoSource = videoSources[currentIndex];
player.src({ src: videoSource.src, type: videoSource.type });
player.play();
// Update the current index and shuffle if necessary
if (isWinVideoNext) {
state.currentWinIndex = (state.currentWinIndex + 1) % winVideos.length;
if (state.currentWinIndex === 0) {
state.winVideos = shuffleArray(winVideos);
}
} else {
state.currentTransitionIndex = (state.currentTransitionIndex + 1) % transitionVideos.length;
if (state.currentTransitionIndex === 0) {
state.transitionVideos = shuffleArray(transitionVideos);
}
}
// Toggle for next video
state.isWinVideoNext = !isWinVideoNext;
player.one('ended', playNextVideo);
};
const initializeVideoPlayback = async () => {
state.winVideos = shuffleArray(await fetchVideoFiles(winFolderPath));
state.transitionVideos = shuffleArray(await fetchVideoFiles(transitionFolderPath));
playNextVideo();
};
initializeVideoPlayback();
});
</script> -->
</body>
</html>