Как подготовить оператор if else при нажатии кнопки и воспроизведении видео - PullRequest
Новая
       10

Как подготовить оператор if else при нажатии кнопки и воспроизведении видео

1 голос
/ 25 апреля 2019

У меня есть три кнопки, трейлер, фильмы и реклама фильмов. Я хочу воспроизводить видео динамически, например, когда я нажимал кнопку «Трейлер», то должен отображаться трейлер видео, когда я нажимал кнопку «Фильмы», затем должен отображаться видеоролик с фильмом, а когда я нажимал на рекламу фильма, он должен отображаться снова.

Мои кнопки 

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

1 Ответ

0 голосов
/ 25 апреля 2019

Вы можете использовать что-то вроде этого, поместить все видео в 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;
}
...