Arrêtez youtube iframe intégré?
J'utilise YouTube iframe pour intégrer des vidéos sur mon site.
<iframe width="100%" height="443" class="yvideo" id="p1QgNF6J1h0"
src="http://www.youtube.com/embed/p1QgNF6J1h0?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"
frameborder="0" allowfullscreen>
</iframe>
Et j'ai multiplié les vidéos sur la même page.
Je veux arrêter chacun d'eux ou l'un d'eux en un clic d'un bouton en utilisant javascript ou autre.
C'est possible?
MISE À JOUR:
J'ai essayé ce que Talvi Watia a dit et utilisé:
$('#myStopClickButton').click(function(){
$('.yvideo').each(function(){
$(this).stopVideo();
});
});
Je suis en train:
Uncaught TypeError: Object [object Object] has no method 'stopVideo'
Vous voudrez peut-être passer en revue par le biais des références JavaScript de l'API JavaScript .
Lorsque vous intégrez votre vidéo sur la page, vous devrez passer ce paramètre:
http://www.youtube.com/v/VIDEO_ID?version=3&enablejsapi=1
Si vous souhaitez un bouton Arrêter toutes les vidéos, vous pouvez configurer une routine javascript pour parcourir vos vidéos et les arrêter:
player.stopVideo()
Cela implique de garder une trace de tous les identifiants de page pour chaque vidéo de la page. Encore plus simple pourrait être de créer une classe puis d’utiliser jQuery.each.
$('#myStopClickButton').click(function(){
$('.myVideoClass').each(function(){
$(this).stopVideo();
});
});
Malheureusement, ces API évoluent très rapidement. Depuis mai 2015, les solutions proposées ne fonctionnent plus car l’objet player n’a pas de méthode stopVideo.
Une solution fiable se trouve dans cette page ( 1 ) et fonctionne avec un:
<iframe id="youtube_player" class="yt_player_iframe" width="640" height="360" src="http://www.youtube.com/embed/aHUBlv5_K8Y?enablejsapi=1&version=3&playerapiid=ytplayer" allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>
et le code JS/jQuery suivant:
$('.yt_player_iframe').each(function(){
this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
});
Si quelqu'un cherche toujours la réponse, je l'ai résolue comme suit:
$("#photos").on("hide",function(){
var leg=$('.videoPlayer').attr("src");
$('.videoPlayer').attr("src",leg);
});
Où #photos est l'ID du modal et .videoPlayer est la classe de l'iframe. Fondamentalement, il rafraîchit l'attribut src (et arrête la lecture de la vidéo). Alors,
$('#myStopClickButton').click(function(){
$('.yvideo').each(function(){
var el_src = $(this).attr("src");
$(this).attr("src",el_src);
});
});
devrait faire l'affaire.
La réponse de Talvi peut toujours fonctionner, mais cette API Javascript Javascript a été marquée comme obsolète. Vous devriez maintenant utiliser le plus récent Youtube IFrame API .
La documentation fournit quelques méthodes pour réaliser l'intégration vidéo, mais pour votre objectif, vous devez inclure les éléments suivants:
//load the IFrame Player API code asynchronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//will be youtube player references once API is loaded
var players = [];
//gets called once the player API has loaded
function onYouTubeIframeAPIReady() {
$('.myiframeclass').each(function() {
var frame = $(this);
//create each instance using the individual iframe id
var player = new YT.Player(frame.attr('id'));
players.Push(player);
});
}
//global stop button click handler
$('#mybutton').click(function(){
//loop through each Youtube player instance and call stopVideo()
for (var i in players) {
var player = players[i];
player.stopVideo();
}
});
Les API sont en désordre car elles changent constamment. Ce javascript pur a fonctionné pour moi:
<div id="divScope" class="boom-lightbox" style="display: none;">
<iframe id="ytplayer" width="720" height="405" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen> </iframe>
</div>
//if I want i can set scope to a specific region
var myScope = document.getElementById('divScope');
//otherwise set scope as the entire document
//var myScope = document;
//if there is an iframe inside maybe embedded multimedia video/audio, we should reload so it stops playing
var iframes = myScope.getElementsByTagName("iframe");
if (iframes != null) {
for (var i = 0; i < iframes.length; i++) {
iframes[i].src = iframes[i].src; //causes a reload so it stops playing, music, video, etc.
}
}
Il y a un code postal d'un utilisateur nommé "CAPTAIN ANONYMOUS". Cela a fonctionné pour moi -mais je dois donner un crédit là où c'est dû -Je suis en train de poster ici parce que je cherchais la solution la plus simple pour incorporer le YT vidéo au sein de l'iframe. et j'estime que sa publication aidera quelqu'un d'autre à passer moins de temps à chercher.
Ce dont j'avais besoin, c’était d’afficher la vidéo dans une fenêtre modale et d’arrêter la lecture à la fermeture.
alors voici la magie: https://codepen.io/anon/pen/GBjqQr
<div><a href="#" class="play-video">Play Video</a></div>
<div><a href="#" class="stop-video">Stop Video</a></div>
<div><a href="#" class="pause-video">Pause Video</a></div>
<iframe class="youtube-video" width="560" height="315" src="https://www.youtube.com/embed/glEiPXAYE-U?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
$('a.play-video').click(function(){
$('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
});
$('a.stop-video').click(function(){
$('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
$('a.pause-video').click(function(){
$('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
});
de plus, si vous voulez qu'il se lise automatiquement dans un objet dom qui n'est pas encore visible, comme une fenêtre modale, si j'utilisais le même bouton pour lire la vidéo que j'utilisais pour montrer le modal, cela ne fonctionnerait pas. :
https://www.youtube.com/embed/EzAGZCPSOfg?autoplay=1&enablejsapi=1&version=3&playerapiid=ytplayer
Remarque:? Autoplay = 1 & où il est placé et l'utilisation du '&' avant la propriété suivante pour permettre à la pause de continuer à fonctionner.
On ne peut pas simplement surestimer ce message et répondre à OP et à ses assistants. Ma solution avec juste video_id échanger:
<div style="pointer-events: none;">
<iframe id="myVideo" src="https://www.youtube.com/embed/video_id?rel=0&modestbranding=1&fs=0&controls=0&autoplay=1&showinfo=0&version=3&enablejsapi=1" width="560" height="315" frameborder="0"></iframe> </div>
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
<script>
$('#play').click(function() {
$('#myVideo').each(function(){
var frame = document.getElementById("myVideo");
frame.contentWindow.postMessage(
'{"event":"command","func":"playVideo","args":""}',
'*');
});
});
$('#pause').click(function() {
$('#myVideo').each(function(){
var frame = document.getElementById("myVideo");
frame.contentWindow.postMessage(
'{"event":"command","func":"pauseVideo","args":""}',
'*');
});
});
</script>
Manière la plus simple est
var frame = document.getElementById("iframeid");
frame.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
$('#aboutVideo .close').on('click',function(){
var reSrc = $('.aboutPlayer').attr("src");
$('.aboutPlayer').attr("src",reSrc)
})#aboutVideo{
width: 100%;
height: 100%;
}
#aboutVideo .modal-dialog, #aboutVideo .modal-dialog .modal-content, #aboutVideo .modal-dialog .modal-content .modal-body{
width: 100%;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
#aboutVideo .modal-header{
padding: 0px;
border-bottom: 0px solid #e5e5e5;
position: absolute;
right: 4%;
top: 4%;
}
#aboutVideo .modal-header .close{
opacity: 1;
position: absolute;
z-index: 99;
color: #fff;
}
#aboutVideo .modal-header button.close{
border-radius: 50%;
width: 7vw;
height: 7vw;
position: absolute;
right: 4%;
top: 7%;
background: aliceblue;
}
#aboutVideo .modal-header button.close:hover{
background-color: rgba(255, 255, 255, 0.28);
}
#aboutVideo .modal-header button.close img{
width: 20px;
margin-top: -0.2vw;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="see-video fa" type="button" data-toggle="modal" data-target="#aboutVideo">
<label>SEE VIDEO</label>
</li>
<div class="modal fade" id="aboutVideo" tabindex="-1" role="dialog" aria-labelledby="aboutVideoLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><img src="http://www.freeiconspng.com/uploads/white-close-button-png-16.png"></span></button>
</div>
<div class="modal-body">
<iframe class="aboutPlayer" width="100%" height="100%" src="https://www.youtube.com/embed/fju9ii8YsGs?autoplay=0&showinfo=0&controls=2&rel=0" frameborder="0" allowfullscreen poster="https://www.google.co.in/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiOvaagmqfWAhUHMY8KHUuJCnkQjRwIBw&url=http%3A%2F%2Fnodeframework.com%2F&psig=AFQjCNEaHveDtZ81veNPSvQDx4IqaE_Tzw&ust=1505565378467268"></iframe>
</div>
</div>
</div>
</div>Pour un Twitter Bootstrap modal/popup avec une vidéo à l'intérieur, cela a fonctionné pour moi:
$('.modal.stop-video-on-close').on('hidden.bs.modal', function(e) {
$('.video-to-stop', this).each(function() {
this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="vid" class="modal stop-video-on-close"
tabindex="-1" role="dialog" aria-labelledby="Title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<iframe class="video-to-stop center-block"
src="https://www.youtube.com/embed/3q4LzDPK6ps?enablejsapi=1&rel=0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
frameborder="0" allowfullscreen>
</iframe>
</div>
<div class="modal-footer">
<button class="btn btn-danger waves-effect waves-light"
data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
<button class="btn btn-success" data-toggle="modal"
data-target="#vid" type="button">Open video modal</button>Basé sur réponse de Marco , notez que je devais simplement ajouter le enablejsapi=1 paramètre de l'URL de la vidéo (rel=0 est juste pour ne pas afficher les vidéos liées à la fin). La fonction JS postMessage est ce qui fait tout le travail, elle arrête la vidéo.
L'extrait de code peut ne pas afficher la vidéo en raison d'autorisations de demande, mais dans un navigateur standard, cela devrait fonctionner à partir de novembre 2018.
Voici une solution javascript pure,
<iframe
width="100%"
height="443"
class="yvideo"
id="p1QgNF6J1h0"
src="http://www.youtube.com/embed/p1QgNF6J1h0?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"
frameborder="0"
allowfullscreen>
</iframe>
<button id="myStopClickButton">Stop</button>
<script>
document.getElementById("myStopClickButton").addEventListener("click", function(evt){
var video = document.getElementsByClassName("yvideo");
for (var i=0; i<video.length; i++) {
video.item(i).contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
}
});
$scope.stopVideo = function() {
var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
iframe.postMessage('{"event":"command","func":"'+'stopVideo'+ '","args":""}', '*');
}
Si quelqu'un veut arrêter la vidéo sans utiliser jQuery, vous pouvez simplement:
iframe.src = '';
L'inconvénient est que vous devez suivre l'URL. Mais en règle générale, cela ne pose pas de problème, car chaque bouton de lecture doit stocker l'URL de la vidéo.