artsite/views/video-story-section.ejs

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<div class="content-wrapper">
  <div class="content-title">
    <h2>
      <%= translate.videoStories[lang] %>:
    </h2>
    <a href="<%= lang %>/videos">
      <%= translate.more[lang] %> >>>
    </a>
  </div>

  <div class="content">
    <div class="album-icon-grid">
      <% videos.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>

<!-- 弹出层 -->
<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) {
    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>