Wie kann ich einen YouTube-Player anhalten, wenn der Iframe ausgeblendet wird?

Ich habe ein verstecktes Div, das ein YouTube-Video in einem enthält <iframe>. Wenn der Benutzer auf einen Link klickt, wird dieses Div sichtbar. Der Benutzer sollte dann in der Lage sein, das Video abzuspielen.

Wenn der Benutzer das Bedienfeld schließt, sollte die Wiedergabe des Videos gestoppt werden. 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 -->

Der einfachste Weg, dieses Verhalten zu implementieren, besteht darin , bei Bedarf die Methoden pauseVideound aufzurufen playVideo. Inspiriert vom Ergebnis meiner vorherigen Antwort habe ich eine Plugin-freie Funktion geschrieben, um das gewünschte Verhalten zu erzielen.

Die einzigen Anpassungen:

• Ich habe eine Funktion hinzugefügt, toggleVideo
• Ich habe ?enablejsapi=1die 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>

Hier ist eine jQuery-Version von RobWs Antwort zum Ausblenden / Anhalten eines Iframes in einem modalen Fenster:

    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 Bezug genommen wird, sind das modale div selbst (# video-div), das die show / hide-Methoden aufruft, und der iframe (# video-iframe), dessen Video-URL src = "" lautet und das Suffix enablejsapi = 1 hat ? Dies ermöglicht die programmgesteuerte Steuerung des Players (z.

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

Hier ist ein einfaches jQuery-Snippet, mit dem alle Videos auf der Seite angehalten werden können, basierend auf den Antworten von RobW und DrewT:

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

Hey, ein einfacher Weg ist es, einfach den src des Videos auf nichts zu setzen, so dass das Video verschwindet, während es versteckt ist, und dann den src wieder auf das gewünschte Video zurückzusetzen, wenn Sie auf den Link klicken, der das Video öffnet das setzt einfach eine id auf den youtube iframe und ruft die src funktion mit dieser id wie folgt 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>

Da Sie ?enablejsapi=trueden src des iframe festlegen müssen, bevor Sie die in anderen Antworten genannten playVideo/ pauseVideo-Befehle verwenden können , kann es hilfreich sein, dies programmgesteuert über Javascript hinzuzufügen (insbesondere, wenn Sie beispielsweise möchten, dass dieses Verhalten auf von anderen eingebettete Videos angewendet wird Nutzer, die gerade einen YouTube-Einbettungscode ausgeschnitten und eingefügt 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 aufrufen, werden document.readyalle Iframes in einem Div mit einer Klasse von "Video" enablejsapi=truezu ihrer Quelle hinzugefügt, sodass die Befehle playVideo / pauseVideo auf ihnen arbeiten können.

(In diesem Beispiel wird jQuery für die eine festgelegte Zeile verwendet var iframes, aber der allgemeine Ansatz sollte mit reinem Javascript genauso gut funktionieren, wenn Sie jQuery nicht verwenden.)

Sie können das Video stoppen, indem Sie die stopVideo()Methode auf 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

RobWs Weg hat für mich großartig funktioniert. Für Leute, die jQuery verwenden, ist hier eine vereinfachte Version, die ich letztendlich 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.

Ich wollte eine Lösung mit jQuery teilen, die funktioniert, wenn mehrere YouTube-Videos auf einer 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 repräsentiert videoModalXX eine eindeutige ID für das Video. Die folgende Funktion stoppt dann das Video:

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

Ich mag diesen Ansatz, weil das Video dort angehalten bleibt, wo Sie aufgehört haben, falls Sie zurückgehen und später weitersehen 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.

entferne einfach src von iframe

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

Die Antwort von Rob W hat mir geholfen herauszufinden, wie ich ein Video über dem Iframe anhalten kann, wenn ein Schieberegler ausgeblendet ist. Ich brauchte jedoch einige Änderungen, bevor ich es zum Laufen bringen konnte. Hier ist ein Ausschnitt aus meinem 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, wie Rob W erwähnte, " 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":""}', '*');
}; 

Schauen Sie sich dies als einfacheres Beispiel auch in JSFiddle an

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 darauf

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

Ich hoffe es hilft dir.

RobWs Antworten hier und anderswo waren sehr hilfreich, aber ich fand meine Bedürfnisse viel einfacher. Ich habe dies an anderer Stelle beantwortet , aber vielleicht ist es auch hier nützlich.

Ich habe eine Methode, mit der ich eine HTML-Zeichenfolge bilde, 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-Zeug in der prepareHTML-Zeichenfolge ignorieren. Die wichtigen Aspekte sind:

• Verwenden der API zum Erstellen des "YT.player" -Objekts. 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 einige Beispiele im Web gesehen, bei denen das erste Skript-Tag (das mit dem iframe_api src-Tag) weggelassen wurde, aber ich brauchte das definitiv, damit dies funktioniert.
• Erstellen der Variablen "player" am Anfang des API-Skripts. Ich habe auch einige Beispiele gesehen, die diese Zeile weggelassen haben.
• Hinzufügen eines ID-Tags zum iFrame, auf das im API-Skript verwiesen wird. Ich habe diesen Teil fast vergessen.
• Hinzufügen von "enablejsapi = 1" am Ende des iFrame src-Tags. Das hat mich für eine Weile aufgehängt, da ich es ursprünglich als Attribut des iFrame-Tags hatte, das bei mir nicht funktioniert / nicht funktioniert hat.

Wenn ich das Video anhalten muss, starte ich Folgendes:

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

Hoffentlich hilft das!

Das 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 ();

Eine präzisere, elegantere und sicherere Antwort: Fügen Sie am Ende der Video-URL "? Enablejsapi = 1" hinzu und erstellen und stringifizieren Sie dann 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 Window.postMessageMethode, 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 der Window.postMessageMethode angeben, targetOriginum sicherzustellen, dass Ihre Nachrichten nicht an einen unbeabsichtigten Empfänger gesendet werden.