Zum Inhalt

Seite nach Ende von Youtube Video (iFrame) neu laden

Bei einem privaten Projekt binde ich Videos auf einer Seite ein und nach dem Ende des Videos wird die Seite neu geladen. Der Code dafür wird von Youtube fast selbst bereit gestellt, wenn man das Script und die Youtube API dafür nutzt. Nun ist es aber so, dass ich die Videos nicht via Script, sondern via iFrame einbinde. Das hat den Vorteil, dass ich mehr Möglichkeiten habe, bestimmte Dinge ein- oder auszublenden. Speziell geht es um alle nervigen Felder, während ich in Ruhe das Video schauen will.

Ich habe lange nach einer Möglichkeit geschaut, beide Dinge zu verbinden (iFrame und Script) – bis ich folgenden Code gefunden habe (code by blex):

<iframe id="player" src="http://www.youtube.com/embed/&lt;?php echo the_field('youtubeid'); ?&gt;?enablejsapi=1&amp;autoplay=1&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0" width="300" height="150"></iframe>
<script>
      var player;
            urlHomepage = '<?php echo get_home_url() ?>/?random';

      function onYouTubeIframeAPIReady() {
        player = new YT.Player( 'player', {
          events: { 'onStateChange': onPlayerStateChange,
                    'onError' : onPlayerError

           }

        });
      }
      function onPlayerStateChange(event) {
        switch(event.data) {
          case 0:
            record('video ended');
            break;
          case 1:
            record('video playing from '+player.getCurrentTime());
            break;
          case 2:
            record('video paused at '+player.getCurrentTime());
        }
      }
      function record(str){
        var p = document.createElement("p");
        p.appendChild(document.createTextNode(str));
        document.body.appendChild(p);
      }

          // Skip dead videos
      function onPlayerError(event) {
      window.location.href = urlHomepage;
      }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
                window.location.href = urlHomepage;

        }
      }
    </script>
<script src="https://www.youtube.com/iframe_api"></script>

Ich ziehe mir also die Youtube ID aus meinem Post, packe Sie in das iFrame und das Script zeichnet auf, wann es startet und wann es aufhört. Danach wir die Seite neu geladen (/?random). Zusätzlich gibt es noch die Funktion, dass bei einem Fehler die Seite ebenfalls neu geladen wird, damit der Shuffle nicht unterbrochen wird.

Veröffentlicht inJavascript

Schreibe den ersten Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

fünfzehn + siebzehn =