web-dev-qa-db-fra.com

démarrer / lire youtube-video intégré (iframe) en cliquant sur 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 au-dessus d'une vidéo et lorsque vous cliquez dessus, l'image s'estompe et commence à jouer.

J'utilise jQuery pour atténuer l'image et espérais trouver un moyen de lire ou de cliquer sur la vidéo à l'aide de jQuery.

La décoloration fonctionne bien, mais je ne vois pas comment déclencher la lecture de la vidéo. Je l'ai fait fonctionner sur quelques navigateurs en définissant la vidéo pour qu'elle se lise automatiquement et la cache, puis en fondu dans la vidéo lorsque l'utilisateur clique sur l'image. Sur la plupart des navigateurs, la lecture automatique de la vidéo s’ajoutait lorsqu’elle apparaissait en fondu, mais dans chrome, la lecture automatique commençait même si elle était masquée. Cela ne fonctionnait pas bien non plus avec iOS.

Depuis que je suis assez nouveau dans ce domaine, je ne suis même pas sûr de l'écrire à 100%, mais j'ai essayé quelque chose comme cela sans succès:

     $('#IMAGE').click(function() { $('#VIDEO').play(); });

Alors, comment pourrais-je faire pour que la vidéo soit lue sur un clic d'image? Y at-il un moyen de lire la vidéo lorsque l’on clique sur l’image, en utilisant simplement jQuery?

Merci d'avance.

jqueryiframeyoutubeonclickembed
48
Corn

La méthode rapide et sale consiste simplement à échanger le iframe avec un qui a autoplay=1 défini avec jQuery.

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

Lien de lecture automatique:

<a class="introVid" href="#video">Watch the video</a></p>


LE JQUERY

Le récupérateur onClick 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>');
}
49
gearsandcode

Vous pouvez le faire simplement comme ça

$('#image_id').click(function() {
  $("#some_id iframe").attr('src', $("#some_id iframe", parent).attr('src') + '?autoplay=1'); 
});

où image_id est votre identifiant d'image sur lequel vous cliquez et some_id est l'identifiant de div dans lequel iframe est également utilisable directement par iframe.

21
drupal_mohitsharma

Pour commencer 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 voudrez peut-être remplacer "& autoplay = 1" par "? Autoplay = 1" s'il n'y a pas de paramètre supplémentaire

fonctionne pour vimeo et youtube sur FF & Chrome

11
Faiz Mohamed Haneef

Vous êtes censé pouvoir spécifier un domaine sûr pour les scripts. le document api mentionne "En tant que mesure de sécurité supplémentaire, vous devez é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.

cependant, ce n'est pas très bien documenté. J'essaie quelque chose de similaire en ce moment.

4
matt

Exemple youtube iframe

<iframe id="video" src="https://www.youtube.com/embed/xNM7jEHgzg4" frameborder="0"></iframe>

Le clic pour jouer à 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";
});

Merci à https://codepen.io/martinwolf/pen/dyLAC

3
alex

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!

1
Anuj Khandelwal

Cela devrait fonctionner parfaitement il suffit de copier ce code 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&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />
</div>
0
Jamil Ahmed