guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
							<!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()">&times;</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>