单击按钮并播放视频时如何设置 if else 语句

Question

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

我的按钮

<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>

Answer 1

您可以使用这样的东西，将所有视频放入 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>

JS：

var buttons = Array.from(document.querySelectorAll('.buttons [target]'));
var videos = Array.from(document.querySelectorAll('.videos > div'));
buttons.forEach(function(button) {
  button.addEventListener('click', function(e) {
     videos.forEach(function(video) {
        video.style.display = 'none';
     });
     document.querySelector(button.getAttribute('target')).style.display = 'block';
  });
});

css:

.videos > div {
  display: none;
}