将下面的代码添加到上述代码中即可:

<div class="popup-overlay" id="popup-overlay" style="display: none;">
    <div class="popup" onclick="event.stopPropagation();">
      <!-- 弹窗内容 -->
      <video id="my-video" src="" playsinline style='width: 100%;position: absolute;top: 0;left: 0;'></video>
      <script>
        var videos = [
          'video/mmexport1691982171410.mp4',
          'video/mmexport1691995122930.mp4',
          'video/2023091222224584D7ABBC30B4AE2873E2.mp4',
          'video/202309122217516BDD53A9D4ED7F1A9657.mp4'
        ];

        var videoIndex = 0;
        var video = document.getElementById('my-video');
        var playButton = document.getElementById('play-button');
        var popupOverlay = document.getElementById('popup-overlay');

        function toggleVideoPlayback() {
          if (video.paused) {
            video.src = videos[videoIndex];
            video.play();
            popupOverlay.style.display = 'block';
          } else {
            video.pause();
            popupOverlay.style.display = 'none';
          }
        }

        // 监听视频结束事件
        video.addEventListener('ended', function() {
          videoIndex++;
          if (videoIndex >= videos.length) {
            videoIndex = 0; // 循环播放
          }
          video.src = videos[videoIndex];
          video.play();
        });

        function closePopup() {
          video.pause();
          popupOverlay.style.display = 'none';
        }
      </script>
      <img src="image/logo.png" style="position: absolute;bottom: 50px;left: 24%;">
      <a id="close-button" class="close-btn" onclick="toggleVideoPlayback()">关闭</a>
    </div>
</div>

<a onclick="openPopup()" style="position: absolute;top: 0;right: 0;">打开弹窗</a>
<script>
    var popupOverlay = document.getElementById('popup-overlay');
    var popup = popupOverlay.querySelector('.popup');

    function openPopup() {
      popupOverlay.style.display = 'block';
      document.body.classList.add('popup-open');
    }

    function closePopup() {
      popupOverlay.style.display = 'none';
      document.body.classList.remove('popup-open');
    }

    // 禁止弹窗外的点击事件冒泡到上层元素
    popup.addEventListener('click', function(e) {
      e.stopPropagation();
    });
</script>
!DOCTYPE htmlhtmlheadstylehellopopup position absolute; top 0; left 0; width 100; height 100; display flex; justify-content center; align-items center; background-color rgba0 0 0 05; visibi

原文地址: https://www.cveoy.top/t/topic/i7oH 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录