如何从其 URL 播放指定容器内的视频？

Question

当我点击带有相应 URL 的链接之一时，我想在 <div class="videoPlayer"> 中播放视频，即不打开新标签。如何在 JavaScript 中执行此操作？

<div class="container">
  <h1>Playing a video</h1>
  <div class="sidebar">
    <nav>
      <ul id="video">
        <li><a href="video/1.mp4">Video 1</a>
        </li>
        <li><a href="video/2.mp4">Video 2</a>
        </li>
        <li><a href="video/3.mp4">video 3</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="videoPlayer">

  </div>
</div>

Answer 1

我会在视频播放器 div 中创建三个 <video src="video/1.mp4" controls></video> 标签，然后让它们 display: none; 直到用户单击其中一个链接。然后让一个 javascript 函数将该视频的 display 更改为 block。

当用户点击一个新链接时，使其同时将所有其他视频播放器转为display: none;

希望这会有所帮助！