我有三个按钮,预告片,电影和电影广告。我想动态播放视频,例如当我点击"预告片"按钮时,视频预告片必须显示,当我点击"电影"按钮时,必须显示电影视频,当我点击电影广告时,它必须再次显示。
我的按钮
<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>
.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;
}