-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
260 lines (227 loc) · 9.76 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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<!--
YouTube iFrame Player API: https://developers.google.com/youtube/iframe_api_reference
Created by Neil Chen on 20210720.
Github: https://github.com/neilchennc/taiwan-live-news/
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="icon" href="favicon.ico" />
<title>台灣新聞直播 | Neil Chen</title>
<meta name="author" content="Neil Chen" />
<meta name="title" content="台灣新聞直播 | Neil Chen" />
<meta name="description" content="集合YouTube常見的台灣新聞直播，顯示在同一頁中，方便觀看不同的新聞頻道。" />
<meta property="og:title" content="台灣新聞直播 | Neil Chen" />
<meta property="og:description" content="集合YouTube常見的台灣新聞直播，顯示在同一頁中，方便觀看不同的新聞頻道。" />
<meta property="og:image"
content="https://raw.githubusercontent.com/neilchennc/taiwan-live-news/main/images/taiwan-icon.png" />
<meta property="og:image:width" content="1722" />
<meta property="og:image:height" content="1722" />
<meta property="og:image:alt" content="Taiwan Icon" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/neilchennc/taiwan-live-news/" />
</head>
<body class="text-center">
<!-- Control Bar -->
<div class="container">
<div class="row row-cols-auto justify-content-center align-items-center">
<button id="playAllButton" class="btn btn-success btn-sm col m-1" onclick="playAllVideos()">
Play All
</button>
<button id="stopAllButton" class="btn btn-danger btn-sm col m-1" onclick="stopAllVideos()">
Stop All
</button>
<div class="form-check form-switch col mx-2" role="button">
<input class="form-check-input" type="checkbox" id="singlePlayerSwitch" onchange="onSinglePlayerChanged()"
role="button" checked />
<label class="form-check-label" style="user-select: none" for="singlePlayerSwitch" role="button">單一播放</label>
</div>
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
aria-controls="offcanvasRight">
節目表
</button>
</div>
</div>
<!-- 公視 -->
<iframe id="iframe-pts" width="480" height="270" src="https://www.youtube.com/embed/C6gYqSHLRw4?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 公視台語台 -->
<iframe id="iframe-pts-taigi" width="480" height="270" src="https://www.youtube.com/embed/6KlRR_DGhmI?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 三立 -->
<iframe id="iframe-set" width="480" height="270" src="https://www.youtube.com/embed/MV9mI0GChwo?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 民視 -->
<iframe id="iframe-formosa" width="480" height="270" src="https://www.youtube.com/embed/ylYJSBUgaMA?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 華視 -->
<iframe id="iframe-cts" width="480" height="270" src="https://www.youtube.com/embed/wM0g8EoUZ_E?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 東森 -->
<iframe id="iframe-ebc" width="480" height="270" src="https://www.youtube.com/embed/V1p33hqPrUk?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 中天 -->
<iframe id="iframe-cti" width="480" height="270" src="https://www.youtube.com/embed/vr3XyVCR4T0?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- TVBS -->
<iframe id="iframe-tvbs" width="480" height="270" src="https://www.youtube.com/embed/m_dhMSvUCIc?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 中視 -->
<iframe id="iframe-ctv" width="480" height="270" src="https://www.youtube.com/embed/TCnaIE_SAtM?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 新唐人 -->
<iframe id="iframe-ntd" width="480" height="270" src="https://www.youtube.com/embed/WIhgU_mc05A?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 寰宇 -->
<iframe id="iframe-global-news" width="480" height="270" src="https://www.youtube.com/embed/6IquAgfvYmc?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- 鏡新聞 -->
<iframe id="iframe-mnews" width="480" height="270" src="https://www.youtube.com/embed/5n0y6b0Q25o?enablejsapi=1"
frameborder="0" allow="autoplay;fullscreen;"></iframe>
<!-- ICRT Radio -->
<div id="icrt" class="container mt-1 mb-1">
<div class="row justify-content-center">
<div class="col-auto">
<div class="bg-dark bg-gradient">
<img src="https://www.icrt.com.tw/language_data/en/image/sh/music_iocn.png" />
</div>
<div class="" style="background-color: whitesmoke">
<audio id="icrt-audio" src="https://icrt.leanstream.co/ICRTFM-MP3?args=web" style="height: 36px"
preload="none" controls>
Your browser does not support the audio element.
</audio>
</div>
<div class="">
<button class="btn btn-light btn-sm m-1" onclick="stopIcrtAudio()">
Stop
</button>
<button class="btn btn-light btn-sm m-1" onclick="reloadIcrtAudio()">
Reload
</button>
</div>
</div>
</div>
</div>
<div id="app">
<offcanvas />
</div>
<script>
// Determine to show or hide ICRT radio by URL parameter (icrt=1).
const searchParams = new URLSearchParams(window.location.search);
if (searchParams.get("icrt") == 1) {
// Show ICRT
} else {
// Hide ICRT
$("#icrt").remove();
}
function stopIcrtAudio() {
//$("#icrt-audio")[0].src = "";
$("#icrt-audio")[0].src = $("#icrt-audio")[0].src;
}
function reloadIcrtAudio() {
$("#icrt-audio")[0].load();
$("#icrt-audio")[0].play();
}
</script>
<!-- Footer -->
<footer>
<div class="text-center p-2" style="font-size: 16px">
<span class="p-2">Created by Neil Chen in 2021.</span>
<a href="https://www.linkedin.com/in/neil-chen-nc/" target="_blank"><img src="images/linkedin-icon.png"
class="rounded p-1" alt="LinkedIn" /></a>
<a href="https://github.com/neilchennc/taiwan-live-news/" target="_blank"><img src="images/github-icon.png"
class="rounded p-1" alt="Github" /></a>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<!-- Vue.js -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- YouTube iFrame -->
<script>
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Init empty array of iframe IDs, one from each video
var iframeIds = [];
// For each iframe you find, add its ID to the iframeIds array
$("iframe").each(function () {
iframeIds.push($(this).attr("id"));
});
// Determine whether single player is enabled
var isSinglePlayer = true;
// Init empty array of YouTube players
var players = [];
// This function creates an YouTube player after the API code downloads.
function onYouTubeIframeAPIReady() {
iframeIds.forEach(function (iframeId) {
var player = new YT.Player(iframeId, {
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange,
onError: onPlayerError,
},
});
players.push(player);
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) {
//event.target.playVideo();
}
// The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && isSinglePlayer) {
players.forEach(function (player, i) {
if (player != event.target) {
player.pauseVideo();
}
});
}
}
// The API will call this function when the video player has an error occurs.
function onPlayerError(event) {
// no-op
}
// Called when single player checkbox changed.
function onSinglePlayerChanged() {
isSinglePlayer = $("#singlePlayerSwitch").prop("checked");
}
// Play all YouTube videos.
function playAllVideos() {
$("#singlePlayerSwitch").prop("checked", false);
isSinglePlayer = false;
players.forEach((player, i) => player.playVideo());
}
// Stop all YouTube videos.
function stopAllVideos() {
players.forEach((player, i) => player.stopVideo());
}
</script>
<script type="module">
import offcanvas from "./components/Offcanvas.js";
const app = {
data() {
return {
text: 0,
};
},
components: { offcanvas },
};
Vue.createApp(app).mount("#app");
</script>
</body>
</html>