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 %>')">
            <img src="<%= video.poster %>" class="album-icon-img" alt="<%= video.seoTitle %>">
            <img src="/assets/svg/play-button.svg" , class="play-button" width="20px" height="20px"
              alt="Coloring Page Video Play Button">
          </a>
          <!-- <video id="video" controls>
            <source src="<%= video.url %>" type="application/x-mpegURL">
          </video> -->
        </div>
        <% }); %>
    </div>
  </div>

</div>

<!-- 弹出层 -->
<div id="video-popup" class="popup">
  <div class="popup-content">
    <span class="close" onclick="closeVideoPopup()">&times;</span>
    <video id="video-player" width="400" height="500" controls></video>
  </div>
</div>

<script>
  function onPlay(url) {
    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();
      });
    }
  }

</script>