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

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

1 个答案: