Kann nicht Aufhören, YouTube-Video in Versteckte DIV-Wiedergabe im hintergrund

Ich habe versucht, verschiedene Dinge, aber kann nicht ein YouTube-video in einem versteckten DIV-Element zum stoppen der Wiedergabe im hintergrund, bevor das DIV-toggle ist auch angeklickt. visibility:hidden nicht scheinen, um das Problem zu lösen. Hier ist der code, den ich verwende. Hoffe mir kann jemand helfen! Ich kann schalten Sie die automatische Wiedergabe, um es zu lösen, aber es bedeutet dann, dass die Benutzer klicken müssen, um eine zusätzliche Taste (die YouTube-Schaltfläche "spielen") das ist nicht ideal.

** IN DIE VON DER WEB-SEITE:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".productDescription").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    return false;
    });

});

</script>

** IN DEN KÖRPER:

<div class="productDescription">

<iframe width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&amp;wmode=transparent&amp;autoplay=0" frameborder="0" allowfullscreen></iframe> 
<div class="closebutton"><a href="index.php" onClick="javascript:location.replace(this.href);" class="show_hide">Close Video</a>
</div>
</div>

** UND IM STYLESHEET:

.productDescription {
display: block;
position:absolute;
left:0px;
top:-2px;
z-index:5;
background-color: #000;
margin: 0px;
float: left;
padding: 0px;
width: 715px;
min-height: 600px;
height: 600px;
}

.show_hide {
display:none;
}

.closebutton {
display: block;
width:120px;
height: 22px;
position:absolute;
left:20px;
top:50px;
background-color: #000;
padding-top: 3px;
float: left;
z-index: 9999;
}

Vielen Dank im Voraus!

InformationsquelleAutor 0rchard | 2012-12-03

7

Die autoplay-Funktion zu spielen beginnen das video, sobald es geladen wird, ob der div sichtbar oder ausgeblendet ist.

Jedoch, wenn Sie entfernen Sie die autoplay-Einstellungen können Sie dann mit einem YouTube-API zur Steuerung der video -, so dass die video-Wiedergabe wird gestartet, wenn eine person Klicks auf anzeigen der div. Eine option ist die iframe-API (was ich empfehlen würde, da Sie schon mit iframe zum einbetten von Videos, und das erlaubt YouTube zu dienen, bis ein HTML5-video statt ein flash-video wenn der viewer auf einem mobilen Gerät) und eine weitere option ist das JavaScript-API.

Weil Sie fragte, für mehr details, hier ist eine kurze Erklärung, wie man mit der YouTube-iFrame-API, um Ihre Bedürfnisse zu erfüllen. Ich empfehle das Lesen der Dokumentation, damit Sie verstehen können, was Los ist und anpassen, wie gebraucht.

Zunächst in Ihrem HTML-erstellen Sie Ihre iframe-video auf die gleiche Weise wie oben, aber fügen Sie zwei Dinge: eine ID für das iframe und einem im parameter "Ursprung" in der iframe-src. (Der parameter "Ursprung" hilft Ihnen dabei, YouTube-player, der sicher von javascript-hacking.) Also würde es so Aussehen:
```
<iframe id="player" width="715" height="440" src="http://www.youtube.com/embed/BLbTegvRg0U?&amp;wmode=transparent&amp;autoplay=0&origin=http://example.com/" frameborder="0" allowfullscreen></iframe>
```
Ersetzen example.com url mit der website wird diese Seite auf.

Irgendwo nach dem iframe, aber vor der </body> tag, fügen Sie diesen code zum laden der api und initialisieren der Spieler:
```
  <script>
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player');
  }
</script>
```
Dann, in Ihrem javascript-gerade vor der Zeile $('.Produktbeschreibung zu").slideToggle(), fügen Sie diesen code:
```
  if ($('.productDescription').is(':visible')) {
       player.pauseVideo();
      }
  else {
       player.playVideo();
      }
```
Diesen code testen, um zu sehen, ob die .productDescription div sichtbar ist. Wenn es versteckt ist, wird es das video zu starten und die Anzeige der div. Wenn es nicht sichtbar ist, wird das video angehalten und ausblenden des div.

Das sollte es tun.

Hallo Bryan und vielen Dank für Ihre Antwort. Es ist toll zu wissen, dass das, was ich versuche zu erreichen ist möglich. Ich bin ein Neuling in JQuery und Javascript und bin gerade dabei dieses Projekt zu helfen, ein Freund. Ich habe gelesen das YouTube-iframe-API und kann nicht wirklich herausfinden, wie man es zu spielen das video nur, wenn jemand klickt, um zu zeigen, das versteckte DIV. Verzeihen Sie mir für die Aufnahme Freiheiten, aber könnten Sie bitte geben Sie mir irgendwelche konkreten Hinweise? Vielen Dank!
Ich ging zurück und erweitern Sie auf meine obige Antwort, um zu zeigen, wie zu tun, was Sie brauchen. Ich war in Ihre Schuhe nur ein paar Jahre her, also bin ich glücklich zu helfen. ABER ich sehr empfehlen Sie Lesen, über das iFrame-API-Dokumentation, damit Sie es verstehen. So wirst du ein guter Programmierer. Um die Wahrheit zu sagen, ich wusste nichts über die API, bevor ich Sie sah Ihre Antwort an diesem morgen, aber ich war glücklich, es zu lernen und zu helfen. Bitte akzeptieren Sie diese Antwort mit einem Häkchen auf der linken Seite.

InformationsquelleAutor Bryan Gentry

Ich habe das gleiche Problem, aber ich könnte fix mit dabei.Finden Sie YouTubeAPI,die wir nicht umsetzen können direkt.So Bearbeite ich auf diese Weise.

Schritt1: Creat loadYTScript() Funktion und setzen youtubeAPI code,

Schritt 2: rufen onYouTubeIframeAPIReady-Funktion()
Dann bei onclick Aufruf der load-Funktion.
Hier ist Ihr js-code:

function loadYTScript(){
                    var tag = document.createElement('script');
                    tag.src = "https://www.youtube.com/iframe_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];

                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    
                }
        function onYouTubeIframeAPIReady() {
                    player = new YT.Player('player', {                                         
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
                        events: {
                            'onReady': onPlayerReady,
                          }
                    });
                }
                function onPlayerReady(event) {
                    event.target.playVideo();
                }
                jQuery(document).ready(function()    {
                $('.show_hide').click(function(){
    $(".productDescription").slideToggle();
    loadYTScript();
    });
    });

Bei html vergessen Sie nicht, fügen Sie

<div class="productDescription">        
            <div id="player"></div>
        </div>

Hoffe, dass es gut funktioniert.

InformationsquelleAutor ahkeno

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.