démarrer / lire intégré (iframe) youtube-vidéo sur un clic d'une image
j'essaie de commencer à lire une vidéo Youtube intégrée en cliquant sur une image. L'idée est d'avoir une image sur une vidéo, et lorsque l'image est cliqué, cela s'estompe et démarre la lecture de la vidéo.
j'utilise jquery pour effacer l'image, et j'espérais trouver un moyen de jouer ou de cliquer sur la vidéo en utilisant jquery aussi bien.
la décoloration fonctionne bien, mais je n'arrive pas à trouver comment déclencher la vidéo à lire. Je l'ai obtenu pour travailler sur un couple de les navigateurs en mettant la vidéo à autoplay et le cacher, puis s'estomper dans la vidéo lorsque l'image a été cliquée. Sur la plupart des navigateurs, La vidéo serait autoplay une fois fané, mais dans chrome il a commencé à autoplay même quand il était caché. Ça n'a pas marché non plus à iOS.
depuis que je suis assez nouveau à cela, je ne suis même pas sûr si je l'écris à 100% correct, mais j'ai essayé quelque chose comme ça sans succès:
$('#IMAGE').click(function() { $('#VIDEO').play(); });
alors, comment pourrais-je faire la lecture de la vidéo sur un clic d'image? Y a-t-il un moyen de lire la vidéo lorsque l'image est cliquée, en utilisant jquery?
Merci d'avance.
7 réponses
le moyen rapide et sale est simplement d'échanger le iframe avec un qui a autoplay=1 ensemble en utilisant jQuery.
THE HTML
espace Réservé:
<div id="videoContainer">
<iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>
"151970920 de lecture automatique de lien:
<a class="introVid" href="#video">Watch the video</a></p>
THE JQUERY
Le onClick catcher qui appelle la fonction
jQuery('a.introVid').click(function(){
autoPlayVideo('VIDEO_ID_HERE','450','283');
});
la fonction
/*--------------------------------
Swap video with autoplay video
---------------------------------*/
function autoPlayVideo(vcode, width, height){
"use strict";
$("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}
Vous pouvez le faire simplement comme ceci
$('#image_id').click(function() {
$("#some_id iframe").attr('src', $("#some_id iframe", parent).attr('src') + '?autoplay=1');
});
où image_id est votre id d'image que vous cliquez et some_id est l'id de div dans lequel iframe est aussi vous pouvez utiliser iframe id directement.
pour démarrer la vidéo
var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);
pour arrêter la vidéo
var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);
, Vous pouvez remplacer "&autoplay=1" avec "?autoplay=1 " incase il n'y a pas de paramètres supplémentaires
fonctionne à la fois pour vimeo et youtube sur FF & Chrome
vous êtes censé être capable de spécifier un domaine qui est sûr pour le script. le document api mentionne "Comme mesure de sécurité supplémentaire, vous devriez également inclure le paramètre origin à L'URL" http://code.google.com/apis/youtube/iframe_api_reference.html src="http://www.youtube.com/embed/J---aiyznGQ?enablejsapi=1&origin=mydomain.com" serait le src de votre iframe.
toutefois, il n'est pas très bien documenté. Je suis en train d'essayer quelque chose de semblable à droite maintenant.
Code Html: -
<a href="#" id="playerID">Play</a>
<iframe src="https://www.youtube.com/embed/videoID" class="embed-responsive-item" data-play="0" id="VdoID" ></iframe>
Code Jquery:-
$('#playerID').click(function(){
var videoURL = $('#VdoID').attr('src'),
dataplay = $('#VdoID').attr('data-play');
//for check autoplay
//if not set autoplay=1
if(dataplay == 0 ){
$('#VdoID').attr('src',videoURL+'?autoplay=1');
$('#VdoID').attr('data-play',1);
}
else{
var videoURL = $('#VdoID').attr('src');
videoURL = videoURL.replace("?autoplay=1", "");
$('#VdoID').prop('src','');
$('#VdoID').prop('src',videoURL);
$('#VdoID').attr('data-play',0);
}
});
C'Est Ça!
exemple youtube iframe
<iframe id="video" src="https://www.youtube.com/embed/xNM7jEHgzg4" frameborder="0"></iframe>
cliquez pour jouer de l'élément HTML
<div class="videoplay">Play</div>
code jQuery pour lire la vidéo
$('.videoplay').on('click', function() {
$("#video")[0].src += "?autoplay=1";
});
cela devrait fonctionner parfait il suffit de copier ce code de div
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer;" alt="" src="http://oi59.tinypic.com/33trpyo.jpg" />
</div>
<div id="thevideo" style="display: none;">
<embed width="631" height="466" type="application/x-shockwave-flash" src="https://www.youtube.com/v/26EpwxkU5js?version=3&hl=en_US&autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />
</div>