<button id="closeVideoBtn">关闭视频</button> <div class="video-container"> <video id="fullscreenVideo" controls></video> </div> <script> const videoElement = document.getElementById("fullscreenVideo"); const closeBtn = document.getElementById("closeVideoBtn"); // 加载视频 function loadVideo() { const videoSource = "images/1、乡镇（街道）平安指数.mp4"; videoElement.src = videoSource; videoElement.play(); console.log(1); } // 关闭视频 function closeVideo() { videoElement.pause(); videoElement.src = ""; } // 监听关闭按钮点击事件 closeBtn.addEventListener("click", closeVideo); // 加载视频 loadVideo(); </script>怎么不自动播放视频

为了在大多数现代浏览器中实现自动播放视频，你需要确保以下几点：

1. 视频必须在用户与页面进行了交互后才能自动播放。这是因为大多数浏览器为了保护用户隐私而禁止未经用户交互的自动播放。

2. 视频必须具有 `muted`（静音）属性。这是因为某些浏览器要求在自动播放视频时将其静音，以提供更好的用户体验。如果你想有声音的自动播放，则需要等到用户与页面进行了交互后才能解除静音。

根据上述要求，你可以对代码进行以下修改来实现自动播放视频：

<style>
.video-container {
  position: relative;
  width: 400px;
}

.video-container video {
  width: 100%;
}
</style>

<button id="closeVideoBtn">关闭视频</button>

<div class="video-container">
  <video id="fullscreenVideo" autoplay muted controls></video>
</div>

<script>
const videoElement = document.getElementById("fullscreenVideo");
const closeBtn = document.getElementById("closeVideoBtn");

// 加载视频
function loadVideo() {
  const videoSource = "images/1、乡镇（街道）平安指数.mp4";
  videoElement.src = videoSource;
  console.log(1);
}

// 关闭视频
function closeVideo() {
  videoElement.pause();
  videoElement.src = "";
}

// 监听关闭按钮点击事件
closeBtn.addEventListener("click", closeVideo);

// 加载视频
loadVideo();
</script>

在上述代码中，我们将 `<video>` 元素的属性修改为 `autoplay muted controls`。`autoplay` 属性用于指示视频在加载后自动播放，`muted` 属性用于将视频静音，以便在自动播放时符合浏览器的要求，`controls` 属性用于显示视频的控制条。

请注意，由于浏览器的限制，自动播放仍然需要用户与页面进行了交互。用户可以通过点击页面上的任何元素来使视频自动播放。

通过以上修改，你可以在用户与页面进行了交互后自动播放视频。