Bonjour J'ai une remorque et un film de 2 boutons, je veux lire la vidéo en fonction du bouton que j'ai cliqué sur le bouton.
Par exemple, je choisis la remorque, alors il devrait lire une remorque et vice versa p>
<video controls playsinline id="player" width="100%">
<script type="text/javascript">
var video = document.getElementById('video');
var source = document.createElement('source');
document.getElementById('trailer').onclick = function () {
source.setAttribute('src', '../inflightapp/storage/app/public/trailer_videos/<?php echo ''.$row2['trailer_video'].''; ?>');
video.appendChild(source);
video.play();
}
document.getElementById('movieNoads').onclick = function () {
source.setAttribute('src', '../inflightapp/storage/app/public/movie_videos/<?php echo ''.$row2['movie_video'].''; ?>');
video.appendChild(source);
video.play();
}
</script>
</video>
4 Réponses :
Vous pouvez regarder cela.
<button class="btn btn-sm btn-dark" id="trailer">Trailer</button>
<button class="btn btn-sm btn-dark" id="movieNoads">Movie</button>
<script type="text/javascript">
var trailer = document.getElementById('trailer');
trailer.setAttribute('data-toggle', 'modal');
trailer.setAttribute('data-target', '#myModal2');
var movieNoads = document.getElementById('movieNoads');
movieNoads.setAttribute('data-toggle', 'modal');
movieNoads.setAttribute('data-target', '#myModal2');
</script>
<video controls playsinline id="player" width="100%">
<script type="text/javascript">
var video = document.getElementById('player');
document.getElementById('trailer').onclick = function () {
document.getElementById("player").style.display = "block";
video.setAttribute('src', 'YouVideoURLHere');
video.play();
}
document.getElementById('movieNoads').onclick = function () { document.getElementById("player").style.display = "block";
video.setAttribute('src', 'YourVideoURLHere');
video.play();
}
document.getElementById("player").style.display = "none";
</script>
</video>J'ai mis à jour l'extrait de code. Maintenant, par défaut, il ne montrera aucune vidéo à moins que l'une de ces deux boutons est cliquée. Pas besoin de rafraîchir la page.
Salut, @zaid Afzal, comment puis-je convertir ce Data-Toggle = "Modal" Target-Target-Target = "# MyModal2" aux codes JavaScript? S'il vous plaît aider pour la dernière fois merci
s'il vous plaît depuis que c'est le code qui fonctionne pour moi .. Aidez-moi la dernière fois Merci merci. Je n'ai tout simplement pas besoin de mettre la cible de données et de la cible de données
J'ai mis à jour le snippet de code en réponse. Vous pouvez demander librement, si vous avez besoin d'aide supplémentaire.
Merci beaucoup !!!! cela a fonctionné à chaque fois. Vos œuvres sont incroyables .. Dieu bénisse
Vous avez oublié de p> charger code> la vidéo
<button class="btn btn-sm btn-dark" id="trailer" data-toggle="modal" data-target="#myModal2">Trailer</button>
<button class="btn btn-sm btn-dark" id="movieNoads" data-toggle="modal" data-target="#myModal2">Movie</button>
<video controls playsinline id="player" width="100%" loop></video>
Vous pouvez essayer ceci
p>
<!DOCTYPE html>
<html>
<body>
<div id="div_video"> </div>
<button onClick="setvideo('movie.mp4')"> Trailer</button>
<button onClick="setvideo('mov_bbb.mp4')"> Movie</button>
</body>
</html>Bienvenue dans le débordement de la pile. Vous pouvez essayer quelque chose dans les lignes des éléments suivants:
J'ai utilisé JQuery et Bootstrap (comme j'ai remarqué que vous avez constaté que vous avez utilisé des éléments HTML Bootstrap). P>
P>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<video id="player" controls autoplay loop>
<source src="" type="video/mp4">
</video>
<!-- Button trigger modal -->
<button type="button" id="trailer" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
Trailer
</button>
<button type="button" id="movieNoads" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
Movie
</button>
Vous essayez d'utiliser un modal et de le peupler avec une vidéo correcte? Vous pouvez simplement cloner l'élément vidéo avec
Autoplay dans le modal et une fois que vous fermez le contenu modal, effacer son contenu prêt pour la prochaine pièce de contenu que le modal doit être rempli avec.@Barrosy, j'ai déjà réussi à montrer la vidéo, mais je dois vous rafraîchir la page avant de cliquer et de choisir des boutons à nouveau , Aide?