it-swarm.com.de

Wie kann ein YouTube-Player angehalten werden, wenn der Iframe ausgeblendet wird?

Ich habe ein verstecktes Div, das ein YouTube-Video in einem <iframe> enthält. Wenn der Benutzer auf einen Link klickt, wird dieses Div sichtbar, und der Benutzer sollte das Video dann abspielen können.

Wenn der Benutzer das Bedienfeld schließt, sollte das Video die Wiedergabe stoppen. Wie kann ich das erreichen?

Code:

<!-- link to open popupVid -->
<p><a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">

  <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>

  <br /><br /> 
  <a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
  close
  </a>
</div><!--end of popupVid -->
84
0161-Jon

Der einfachste Weg, dieses Verhalten zu implementieren, ist, wenn nötig, die Methoden pauseVideo und playVideo aufzurufen. Inspiriert durch das Ergebnis meiner vorherigen Antwort habe ich eine Pluginless-Funktion geschrieben, um das gewünschte Verhalten zu erreichen.

Die einzigen Anpassungen:

  • Ich habe eine Funktion hinzugefügt, toggleVideo
  • Ich habe ?enablejsapi=1 zur URL von YouTube hinzugefügt, um die Funktion zu aktivieren

Demo: http://jsfiddle.net/ZcMkt/
Code:

<script>
function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("popupVid");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>

<p><a href="javascript:;" onClick="toggleVideo();">Click here</a> to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>

<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
   <iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
   <br /><br />
   <a href="javascript:;" onClick="toggleVideo('hide');">close</a>
176
Rob W

Hier ist eine jQuery-Antwort auf die Antwort von RobW, bei der ein iframe in einem modalen Fenster ausgeblendet/angehalten wird:

    function toggleVideo(state) {
        if(state == 'hide'){
            $('#video-div').modal('hide');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
        else {
            $('#video-div').modal('show');
            document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
        }
    }

Die HTML-Elemente, auf die verwiesen wird, sind das modale div (# video-div), das die show/hide-Methoden aufruft, und der iframe (# video-iframe), der die Video-URL wie src = "" hat und das Suffix enablejsapi hat = 1? das die programmatische Steuerung des Players ermöglicht (z. B.

Weitere Informationen zum HTML finden Sie in der Antwort von RobW.

23
DrewT

Hier ist ein einfaches jQuery-Snippet, um alle Videos auf der Seite basierend auf den Antworten von RobW und DrewT anzuhalten:

jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
15
quartarian

Eine einfache Möglichkeit besteht darin, die Quelle des Videos einfach auf nichts zu setzen, so dass das Video verschwinden wird, während es ausgeblendet wird, und dann die Quelle auf das gewünschte Video zurückgesetzt wird, wenn Sie auf den Link klicken, der das Video öffnet Setzen Sie einfach eine ID für den Youtube-iframe und rufen Sie die src-Funktion mit dieser ID auf

<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>

<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>

</boby>
9
Paula

Da Sie ?enablejsapi=true in der src des iframe setzen müssen, bevor Sie die in anderen Antworten erwähnten playVideo/pauseVideo-Befehle verwenden können, kann es nützlich sein, dies programmgesteuert über Javascript hinzuzufügen (insbesondere wenn Sie z. B. dieses Verhalten möchten.) auf Videos anzuwenden, die von anderen Nutzern eingebettet wurden, die gerade einen YouTube-Einbettungscode ausgeschnitten haben). In diesem Fall könnte so etwas nützlich sein:

function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i < iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}

... Wenn Sie dies mit document.ready aufrufen, werden an alle Iframes in einem div mit der Klasse "video" enablejsapi=true zu ihrer Quelle hinzugefügt, sodass die Befehle playVideo/pauseVideo damit arbeiten können.

(nb. In diesem Beispiel wird jQuery für diese eine Zeile verwendet, in der var iframes festgelegt ist. Der generelle Ansatz sollte jedoch auch mit reinem Javascript funktionieren, wenn Sie nicht jQuery verwenden.).

6
Nick F

Sie können das Video anhalten, indem Sie die stopVideo()-Methode in der YouTube-Player-Instanz aufrufen, bevor Sie das div ausblenden, z.

player.stopVideo()

Weitere Informationen finden Sie hier: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls

5
david

RobWs Weg hat für mich gut funktioniert. Für Leute, die jQuery verwenden, hier eine vereinfachte Version, die ich am Ende verwendet habe:

var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);

In diesem Beispiel ist "video_player" ein übergeordnetes div, das den iframe enthält.

4
skribbz14

Ich wollte eine von mir entwickelte Lösung mit jQuery freigeben, die funktioniert, wenn mehrere YouTube-Videos auf einer einzigen Seite eingebettet sind. In meinem Fall habe ich für jedes Video ein modales Popup wie folgt definiert:

<div id="videoModalXX">
...
    <button onclick="stopVideo(videoID);" type="button" class="close"></button>
    ...
    <iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>

In diesem Fall stellt videoModalXX eine eindeutige ID für das Video dar. Dann stoppt die folgende Funktion das Video:

function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

Ich mag diesen Ansatz, weil das Video dort anhält, wo Sie aufgehört haben, falls Sie zurückgehen und später weiter schauen möchten. Es funktioniert gut für mich, weil es nach dem Iframe im Videomodal mit einer bestimmten ID sucht. Es ist keine spezielle YouTube-Element-ID erforderlich. Hoffentlich wird dies auch jemand nützlich finden.

4
Poldon

entfernen Sie einfach src von iframe

$('button.close').click(function(){
    $('iframe').attr('src','');;
});
2
rakesh kejriwal

Die Antwort von Rob W half mir, herauszufinden, wie ich ein Video über einen Iframe anhalten kann, wenn ein Schieberegler ausgeblendet ist. Ich brauchte jedoch einige Modifikationen, bevor ich es schaffen konnte. Hier ist ein Ausschnitt aus meiner HTML:

<div class="flexslider" style="height: 330px;">
  <ul class="slides">
    <li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
    <li class="post-65><img  src="http://localhost/..../banner_image_2.jpg "></li>
    <li class="post-67 ">
        <div class="fluid-width-video-wrapper ">
            <iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
        </div>
    </li>
  </ul>
</div>

Beachten Sie, dass dies auf localhosts funktioniert und auch von Rob W erwähnt wurde, dass "enablejsapi = 1" am Ende der Video-URL hinzugefügt wurde. 

Folgendes ist meine JS-Datei:

jQuery(document).ready(function($){
    jQuery(".flexslider").click(function (e) {
        setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated

    });
});

function checkiframe(){
    var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
    console.log(iframe_flag);
    var tooglePlay=0;
    if (iframe_flag) {                                //If Visible then AutoPlaying the Video
        tooglePlay=1;
        setTimeout(toogleVideo, 1000);                //Also using timeout here
    }
    if (!iframe_flag) {     
        tooglePlay =0;
        setTimeout(toogleVideo('hide'), 1000);  
    }   
}

function toogleVideo(state) {
    var div = document.getElementsByTagName("iframe")[0].contentWindow;
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}; 

Als einfacheres Beispiel, überprüfen Sie dies auf JSFiddle

1
Fahim

Dieser Ansatz erfordert jQuery. Wählen Sie zunächst Ihren iframe aus:

var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.

Jetzt wählen Sie die Schaltfläche Wiedergabe/Pause dieses Iframes und klicken Sie darauf

$('button.ytp-play-button.ytp-button', yourIframe).click();

Ich hoffe es hilft dir.

1
Hongarc

Die Antworten von RobW hier und anderswo waren sehr hilfreich, aber meine Bedürfnisse waren viel einfacher. Ich habe diese anderswo beantwortet, aber vielleicht wird es auch hier nützlich sein. 

Ich habe eine Methode, bei der ich eine HTML-Zeichenfolge formuliere, die in eine UIWebView geladen werden soll:

NSString *urlString = [NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoID];

preparedHTML = [NSString stringWithFormat:@"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%@?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];

Sie können das Styling in der vorbereiteten HTML-Zeichenfolge ignorieren. Die wichtigen Aspekte sind:

  • Verwenden der API zum Erstellen des Objekts "YT.player". Zu einem bestimmten Zeitpunkt hatte ich nur das Video im iFrame-Tag und das hinderte mich daran, das "Player" -Objekt später mit JS zu referenzieren.
  • Ich habe ein paar Beispiele im Web gesehen, bei denen das erste Skript-Tag (das mit dem iframe_api-src-Tag) weggelassen wurde, aber ich brauchte das definitiv, um dies zu erreichen.
  • Die "player" -Variable wird am Anfang des API-Skripts erstellt. Ich habe auch einige Beispiele gesehen, die diese Zeile weggelassen haben.
  • Hinzufügen eines ID-Tags zum iFrame, auf den im API-Skript verwiesen werden soll. Ich hätte diesen Teil fast vergessen.
  • Hinzufügen von "enablejsapi = 1" am Ende des iFrame-Tags "src". Das hat mich für eine Weile aufgehängt, da ich es zunächst als Attribut des iFrame-Tags hatte, das für mich nicht funktionierte.

Wenn ich das Video pausieren muss, starte ich Folgendes:

[webView stringByEvaluatingJavaScriptFromString:@"player.pauseVideo();"];

Hoffentlich hilft das!

0
Brian

Eine prägnantere, elegantere und sicherere Antwort: Fügen Sie am Ende der Video-URL "? Enablejsapi = 1" hinzu, konstruieren und zeichnen Sie ein gewöhnliches Objekt, das den Befehl pause darstellt:

const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));

Verwenden Sie die Methode Window.postMessage, um die resultierende JSON-Zeichenfolge an das eingebettete Videodokument zu senden:

// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);

Stellen Sie sicher, dass Sie die Video-URL für das Argument targetOrigin der Methode Window.postMessage angeben, um sicherzustellen, dass Ihre Nachrichten nicht an unbeabsichtigte Empfänger gesendet werden.

0
Patrick Dark

Dies funktioniert gut mit dem YT - Player

 createPlayer(): void {
  return new window['YT'].Player(this.youtube.playerId, {
  height: this.youtube.playerHeight,
  width: this.youtube.playerWidth,
  playerVars: {
    rel: 0,
    showinfo: 0
  }
});
}

this.youtube.player.pauseVideo ();

0
HuyLe