Javascript 单击按钮并播放视频时如何调节if-else语句

我有三个按钮，预告片、电影和电影广告。我想动态播放视频，比如当我单击按钮预告片时，视频预告片必须显示，当我单击按钮电影时，电影视频必须显示，当我单击电影广告时，它必须再次显示

我的按钮

<button class="btn btn-sm btn-dark" id="trailer">Trailer</button>
<button class="btn btn-sm btn-dark" id="movies">Movies</button>
<button class="btn btn-sm btn-dark" id="movieads">Movie Ads</button>

拖车
影视
电影广告

正如你们所看到的，我现在在视频下面有一个简单的伪代码，它总结了我的逻辑，有什么方法可以让这个语法实现并工作吗？非常感谢。请看下面我的代码

<div class="modal" id="myModal2">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container" id='container'>
         <div id="getdata" style='display: none;'>
            <div class="overlay">
                <br><br><br><br><br>
              <div class="container">
                  <div class="row">
                  <div class="text-center col-md-12">
                      <div class="jumbotron" style="background-color: rgba(42, 44, 45, 0.9); color: #71777f">
                        <h3>Passenger Announcement is Going On.</h3>
                      </div>
                  </div>
                  </div>
              </div>    
            </div>
         </div>
----------------------PSEUDOCODE HERE-----------------------------------
         <?php 

          if (trailer == clicked) {
            echo '<video controls playsinline id="player" width="100%">
                <source src="./inflightapp/storage/app/public/trailer_videos/<?php echo ''.$row2['trailer_video'].''; ?>" type="video/mp4" size="1080">
            </video>';
          }else if(movies == clicked){
            echo '<video controls playsinline id="player" width="100%">
            <source src="./inflightapp/storage/app/public/movie_videos/<?php echo ''.$row2['movies_video'].''; ?>" type="video/mp4" size="1080">
            </video>';
          }else if(moviesAds ==clicked){
            echo '<video controls playsinline id="player" width="100%">
            <source src="./inflightapp/storage/app/public/movie_ads/<?php echo ''.$row2['movies_video'].''; ?>" type="video/mp4" size="1080">
            </video>';
          }

          ?>

        </div>
      </div>
    </div>
  </div>
</div>

乘客广播正在进行中。
----------------------这里是伪代码-----------------------------------

您可以使用类似的方法，将所有视频转换为html格式，只需单击即可显示

HTML、PHP：

<ul class="buttons">
  <li><button target=".videos .trailer">Trailer</button></li>
  <li><button target=".videos .movie">Movie</button></li>
</ul>
<div class="videos">
  <div class="trailer">
     <video controls playsinline id="player" width="100%">
         <source src="./inflightapp/storage/app/public/trailer_videos/<?= $row2['trailer_video'] ?>" type="video/mp4" size="1080">
     </video>
   </div>
   <div class="movie">
       <video controls playsinline id="player" width="100%">
            <source src="./inflightapp/storage/app/public/movie_videos/<?= $row2['movies_video'] ?>" type="video/mp4" size="1080">
       </video>
   </div>
</div>

css:

---

您可以使用类似的方法，将所有视频放入html中，并仅在单击时显示它们

HTML、PHP：

<ul class="buttons">
  <li><button target=".videos .trailer">Trailer</button></li>
  <li><button target=".videos .movie">Movie</button></li>
</ul>
<div class="videos">
  <div class="trailer">
     <video controls playsinline id="player" width="100%">
         <source src="./inflightapp/storage/app/public/trailer_videos/<?= $row2['trailer_video'] ?>" type="video/mp4" size="1080">
     </video>
   </div>
   <div class="movie">
       <video controls playsinline id="player" width="100%">
            <source src="./inflightapp/storage/app/public/movie_videos/<?= $row2['movies_video'] ?>" type="video/mp4" size="1080">
       </video>
   </div>
</div>

css:

---

如果需要从服务器发送此url，则需要使用Ajax进行此操作。您正在JavaScript中添加click handler从服务器获取url并将其插入页面。@jcubic，没有ajax还有其他方法吗？/您可以隐藏所有视频标记，并在单击时用javascript显示所需的视频标记。@jcubic您能帮我编写代码吗？我对javascript不太熟悉：（谢谢..只是为了澄清一下，当您单击按钮时，将出现一个模式，视频将在该模式内播放，对吗？如果您需要从服务器发送此url，则需要使用Ajax进行此操作您正在JavaScript中添加click handler从服务器获取url并将其注入页面。@jcubic，没有Ajax还有其他方法吗/您可以隐藏所有视频标记，并在单击时在javascript中显示所需的视频标记。@jcubic您能帮我处理代码吗？我对javascript不太熟悉：（谢谢..只是想澄清一下，当您单击按钮时，将出现一个模式，视频将在该模式内播放，对吗？我会尝试它谢谢答案并帮助我分析您的答案：）我会尝试它谢谢答案并帮助我分析您的答案：）

.videos > div {
  display: none;
}