|
|
@@ -0,0 +1,146 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="<%= lang %>">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <%- include('common-meta') %>
|
|
|
+ <link rel="stylesheet" href="/stylesheets/styles.css">
|
|
|
+ <link rel="stylesheet" href="/stylesheets/header.css">
|
|
|
+</head>
|
|
|
+
|
|
|
+<!-- Google tag (gtag.js) -->
|
|
|
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
|
|
|
+<script>
|
|
|
+ window.dataLayer = window.dataLayer || [];
|
|
|
+ function gtag() { dataLayer.push(arguments); }
|
|
|
+ gtag('js', new Date());
|
|
|
+
|
|
|
+ gtag('config', 'G-JBGGVGLHTP');
|
|
|
+</script>
|
|
|
+
|
|
|
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <%- include('header') %>
|
|
|
+
|
|
|
+ <h1 style="display: flex; justify-content: center; padding: 10px; color: purple">
|
|
|
+ <%= title %>
|
|
|
+ </h1>
|
|
|
+ <h2 style="display: flex; justify-content: center; padding: 0px 10px 10px 10px; color: #333">
|
|
|
+ <%= description %>
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+ <div class="album-icon-grid">
|
|
|
+ <% data.forEach(video=> { %>
|
|
|
+ <div class="album-grid-card">
|
|
|
+ <div style="padding: 2px; font-size: 14px; color: grey; text-align: center; white-space: nowrap;">
|
|
|
+ <%= translate.videoStory[lang] %>
|
|
|
+ </div>
|
|
|
+ <a href="javascript:;" onclick="onPlay(`<%= video.url %>`, `<%= video.jsonStr %>`)">
|
|
|
+ <img src="<%= video.poster %>" class="album-icon-img" alt="<%= video.seoTitle %>">
|
|
|
+ <img src="/assets/svg/play-button.svg" , class="video-play-button" width="20px" height="20px"
|
|
|
+ alt="Coloring Page Video Play Button">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <% }); %>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 弹出层 -->
|
|
|
+ <div id="video-popup" class="popup">
|
|
|
+ <div class="popup-content-wrapper">
|
|
|
+ <span class="close" onclick="closeVideoPopup()">×</span>
|
|
|
+ <div class="popup-content-left">
|
|
|
+ <video id="video-player" controls></video>
|
|
|
+ </div>
|
|
|
+ <div id="video-content" class="popup-content-right">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+ function onPlay(url, videoJson) {
|
|
|
+ // alert(url);
|
|
|
+ // return;
|
|
|
+ console.log(url);
|
|
|
+ console.log(videoJson);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var video = JSON.parse(`${videoJson}`);
|
|
|
+ generateVideoContent(video);
|
|
|
+
|
|
|
+ var videoPopup = document.getElementById('video-popup');
|
|
|
+ var videoPlayer = document.getElementById('video-player');
|
|
|
+
|
|
|
+ videoPopup.style.display = 'block';
|
|
|
+
|
|
|
+ if (Hls.isSupported()) {
|
|
|
+ var hls = new Hls();
|
|
|
+ hls.loadSource(url);
|
|
|
+ hls.attachMedia(videoPlayer);
|
|
|
+ hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
|
+ videoPlayer.play();
|
|
|
+ });
|
|
|
+ } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
|
|
|
+ videoPlayer.src = url;
|
|
|
+ videoPlayer.addEventListener('canplay', function () {
|
|
|
+ videoPlayer.play();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ window.closeVideoPopup = function () {
|
|
|
+ videoPopup.style.display = 'none';
|
|
|
+ videoPlayer.pause(); // 停止视频播放
|
|
|
+ videoPlayer.src = ''; // 重置视频源，避免浏览器缓存问题
|
|
|
+ };
|
|
|
+
|
|
|
+ // 点击模态对话框外部时关闭对话框（可选，但推荐添加）
|
|
|
+ videoPopup.addEventListener('click', function (event) {
|
|
|
+ if (event.target === videoPopup) {
|
|
|
+ closeVideoPopup();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 防止点击关闭按钮时事件冒泡到弹出层导致关闭（因为我们已经为关闭按钮单独绑定了事件）
|
|
|
+ var closeButton = document.querySelector('.close');
|
|
|
+ if (closeButton) {
|
|
|
+ closeButton.addEventListener('click', function (event) {
|
|
|
+ event.stopPropagation();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function generateVideoContent(video) {
|
|
|
+ var div = document.getElementById('video-content');
|
|
|
+
|
|
|
+ div.innerHTML = `
|
|
|
+ <h1 style="font-size: 16pt; font-weight: bold;">${video.seoTitle}</h1>
|
|
|
+ `;
|
|
|
+
|
|
|
+ var contentHTML = '<div>';
|
|
|
+
|
|
|
+ video.contents.forEach(item => {
|
|
|
+ contentHTML += `
|
|
|
+ <div class="image-card" style="margin-bottom: 10px;">
|
|
|
+ <a href=${item.uri}><img src=${item.thumb} alt='${item.title}'></a>
|
|
|
+ <div class="card-title">${item.title}</div>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ });
|
|
|
+
|
|
|
+ contentHTML += '</div>';
|
|
|
+
|
|
|
+ div.innerHTML += contentHTML;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
