it-swarm.com.de

eingebettetes (iframe) youtube-video beim klicken auf ein bild starten / abspielen

Ich versuche, ein eingebettetes YouTube-Video abzuspielen, indem ich auf ein Bild klicke. Die Idee ist, ein Bild über einem Video zu haben. Wenn auf das Bild geklickt wird, wird es ausgeblendet und die Wiedergabe des Videos gestartet.

Ich verwende jquery, um das Bild auszublenden, und ich habe gehofft, eine Möglichkeit zu finden, das Video auch mit jquery abzuspielen oder darauf zu klicken.

Das Fading funktioniert gut, aber ich kann nicht herausfinden, wie das Video zum Abspielen angestoßen wird. Ich habe es auf einigen Browsern zum Laufen gebracht, indem ich das Video so eingestellt habe, dass es automatisch abgespielt und ausgeblendet wird, und dann das Video eingeblendet habe, als auf das Bild geklickt wurde. In den meisten Browsern wurde das Video beim Einblenden automatisch wiedergegeben, aber in chrome) wurde es automatisch wiedergegeben, auch wenn es ausgeblendet war. Auch in iOS funktionierte es nicht.

Da ich ziemlich neu in diesem Bereich bin, bin ich mir nicht mal sicher, ob ich es 100% korrekt schreibe, aber ich habe so etwas ohne Erfolg versucht:

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

Also, wie würde ich vorgehen, um das Video auf ein Bild klicken zu lassen? Gibt es eine Möglichkeit, das Video abzuspielen, wenn auf das Bild geklickt wird, nur mit jquery?

Danke im Voraus.

48
Corn

Der schnelle und schmutzige Weg ist, einfach den iframe durch einen mit autoplay=1 mit jQuery setzen.

DAS HTML

Platzhalter:

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

Autoplay-Link:

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


DAS JQUERY

Der onClick Catcher, der die Funktion aufruft

jQuery('a.introVid').click(function(){
  autoPlayVideo('VIDEO_ID_HERE','450','283');
});

Die Funktion

/*--------------------------------
  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

Sie können dies einfach so tun

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

dabei ist image_id Ihre Bild-ID, auf die Sie klicken, und some_id die ID von div. In diesem iframe können Sie auch die iframe-ID direkt verwenden.

21

Video starten

var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);

Video anhalten

var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);

Möglicherweise möchten Sie "& autoplay = 1" durch "? Autoplay = 1" ersetzen, sofern keine zusätzlichen Parameter vorhanden sind

funktioniert sowohl für Vimeo als auch für YouTube unter FF & Chrome

11

Sie müssen in der Lage sein, eine Domain anzugeben, die für die Skripterstellung sicher ist. Das API-Dokument erwähnt "Als zusätzliche Sicherheitsmaßnahme sollten Sie auch den Origin-Parameter in die URL einfügen" http://code.google.com/apis/youtube/iframe_api_reference.html src = "http : //www.youtube.com/embed/J---aiyznGQ? enablejsapi = 1 & Origin = mydomain.com "wäre das src deines iframes.

es ist jedoch nicht sehr gut dokumentiert. Ich versuche gerade etwas Ähnliches.

4
matt

Beispiel youtube iframe

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

Das Click-to-Play-HTML-Element

<div class="videoplay">Play</div> 

jQuery-Code zum Abspielen des Videos

$('.videoplay').on('click', function() {
    $("#video")[0].src += "?autoplay=1";
});

Vielen Dank an https://codepen.io/martinwolf/pen/dyLAC

3
alex

HTML Quelltext:-

<a href="#" id="playerID">Play</a>
<iframe src="https://www.youtube.com/embed/videoID" class="embed-responsive-item" data-play="0" id="VdoID" ></iframe>

Abfragecode: -

$('#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);
     }

});

Das ist es!

1
Anuj Khandelwal

Dies sollte perfekt funktionieren, kopieren Sie einfach diesen Div-Code

<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