如何创建弹出视频弹窗 - 完整代码示例

<p>点击下方文字弹出弹窗：</p>
<p><a href="#" onclick="togglePopup()">点击这里</a></p>
<div id="hellopopup" class="hellopopup">
  <div class="hellopopup-content">
    <h1>这是一个弹窗</h1>
    <p>弹窗的内容可以根据需求进行修改</p>
    <button onclick="togglePopup()">关闭</button>
  </div>
</div>
<script>
function togglePopup() {
  var popup = document.getElementById("hellopopup");
  popup.classList.toggle("show-hellopopup");
}
</script>
<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'
        ];
<pre><code>    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 &gt;= videos.length) {
        videoIndex = 0; // 循环播放
      }
      video.src = videos[videoIndex];
      video.play();
    });

    function closePopup() {
      video.pause();
      popupOverlay.style.display = 'none';
    }
  &lt;/script&gt;
  &lt;img src=&quot;image/logo.png&quot; style=&quot;position: absolute;bottom: 50px;left: 24%;&quot;&gt;
  &lt;a id=&quot;close-button&quot; class=&quot;close-btn&quot; onclick=&quot;toggleVideoPlayback()&quot;&gt;关闭&lt;/a&gt;
&lt;/div&gt;
</code></pre>
</div>
<p><a onclick="openPopup()" style="position: absolute;top: 0;right: 0;">打开弹窗</a><script>
var popupOverlay = document.getElementById('popup-overlay');
var popup = popupOverlay.querySelector('.popup');</p>
<pre><code>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();
});
</code></pre>
</script>