• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Zeitverzögerung eines Buttons vom Video abhängig machen

Also wird bei dir das Video überhaupt nicht abgespielt? Du solltest es in 2 Versionen einbinden, einmal als *.ogg, und einmal als *.mp4...
 
Doch doch, das Video wird abgespielt - es kommt halt nur kein Button.
Ich gebe dir einfach mal den Link zur Seite: http://wp.fb-media-store.de/produktxyz/

Es ist nur eine Testversion, um zuschauen, was wo wie mit Wordpress möglich ist. Das Template wurde schnell mit Artisteer "gezimmert" also bitte nicht wundern.
 
Hallo,
leider habe ich keine Kenntnisse über WP, aber weil dir niemand mehr antwortet, will ich es mal probieren. Die Fehlermeldungen sagen ja eigentlich genau aus, wo es fehlt: Die Funktion jQuery.totalStorage() wird in den JS-Dateien page-tracking.js und cta-load-variation.js aufgerufen und ist nicht definiert. Offenbar wird diese Funktion in jquery.total-storage.min.js definiert, was sich bestätigt, wenn man sich die Entwicklerversion in Github ansieht. Der Grund für den Fehler ist wahrscheinlich, dass im Body nochmal dieses auftaucht
Code: 
	<html>
  <head>
    <title>nach 50 Sekunden Banner einblenden</title>
    <meta charset="UTF-8">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
      $(document).ready(function(){
        wp_cta_load_variation("159", "", "0"); 
        showOn(50, document.getElementById("Testverkauf"));
      });
    </script>
    <script>
      function showOn(position, element){
        function checkTime(){
          var playTime = element.currentTime;
          var min = position - 1;
          var max = position + 1;
          if(playTime > min && playTime < max){
            $("#banner").fadeIn("slow", function(){
              console.log("Banner eingeblendet bei " + playTime + " sek.");
            });
            window.clearInterval(callIntervall);
          }
        }
        var callInterval = window.setInterval(checkTime, 500);
      }
    </script>
  </head>
  <body>
und dass dort jQuery nochmal eingezogen wird.
Anscheinend hast Du einfach den Code eines vollständigen HTML-Dokumentes, der oben gepostet wurde, in den Body eingefügt. Das Grundgerüst deiner HTML-Datei ist also nicht in Ordnung und das musst Du beheben.
Edit: Ich habe es mal zum Laufen gebracht. Dieses nach dem Einzug von jQuery im Head einfügen:
Code: 
    <script>
        jQuery(document).ready(function () {
            var vid = document.getElementById("Testverkauf");
            var delay = 5;
            function checkTime() {
                var playTime = vid.currentTime;
                if (playTime > delay) {
                    jQuery("#banner").fadeIn("slow", function () {
                        console.log("Banner eingeblendet bei " + playTime + " sek.");
                    });
                    window.clearInterval(callInterval);
                }
            }
            var callInterval = window.setInterval(checkTime, 500);
        });
    </script>
(Warum es mit $ nicht funktioniert, weiß ich auch nicht.)
Und dieses muss im Body stehen:
HTML: 
    <video class="wp-video-shortcode" id="Testverkauf" autoplay="true" preload="metadata" controls="controls" height="400" width="700">
      <source type="video/mp4" src="http://wp.fb-media-store.de/wp-content/uploads/2014/08/test_VSL.mp4">
      <a href="http://wp.fb-media-store.de/wp-content/uploads/2014/08/test_VSL.mp4"></a>
    </video>
    <div id="banner" style="display:none">
      <a href="http://www.google.de/" target="blank" title="Zielseite">
        <img src="http://wp.fb-media-store.de/wp-content/uploads/2014/08/CTA_1.jpg">
      </a>
    </div>
Dann funktioniert es.
 
Zuletzt bearbeitet:
Hallo Sempervivum, ich verneige mich vor deinem - und natürlich auch vor dem Wissen der gesamten Community ;-)
Ich habe das Ganze nun eingebaut, aber (es kommt immer ein aber): der Button wird nach 50Sek. eingeblendet und zwar immer. D.h. wenn ich Pause drücke, 10 Sek. warte und dann wieder Play drücke, errscheint der Button bei 40 Sek. obwohl dieser eben erst bei 50 Sek. des Videos gezeigt werden soll...

Das ist wirklich eine schwierige Geburt ;-/

Edit: Das Ganze sieht nun so aus:

Code: 
<html>
  <head>
    <title>nach 50 Sekunden Banner einblenden</title>
    <meta charset="UTF-8">
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
      <script>
        jQuery(document).ready(function () {
            var vid = document.getElementById("Testverkauf");
            var delay = 5;
            function checkTime() {
                var playTime = vid.currentTime;
                if (playTime > delay) {
                    jQuery("#banner").fadeIn("slow", function () {
                        console.log("Banner eingeblendet bei " + playTime + " sek.");
                    });
                    window.clearInterval(callInterval);
                }
            }
            var callInterval = window.setInterval(checkTime, 50000);
        });
    </script>
  </head>
  <body>
    <video class="wp-video-shortcode" id="Testverkauf" width="700" height="400" preload="metadata" controls="controls">
      <source type="video/mp4" src="http://wp.fb-media-store.de/wp-content/uploads/2014/08/test_VSL.mp4"/>
      <a href="http://wp.fb-media-store.de/wp-content/uploads/2014/08/test_VSL.mp4"></a>
    </video>
    <div id="banner" style="display:none">
      <a href="http://www.google.de" target="blank" title="Zielseite">
        <img src="http://wp.fb-media-store.de/wp-content/uploads/2014/08/CTA_1.jpg">
      </a>
    </div>
  </body>
</html>
 
Zuletzt bearbeitet:
der Button wird nach 50Sek. eingeblendet und zwar immer. D.h. wenn ich Pause drücke, 10 Sek. warte und dann wieder Play drücke, errscheint der Button bei 40 Sek. obwohl dieser eben erst bei 50 Sek. des Videos gezeigt werden soll...
Zum Vergrößern anklicken....
Das wundert mich, denn ich hatte es getestet und da hat es funktioniert, auch mit Pause.
Du hast da aber einen Fehler eingebaut: var callInterval = window.setInterval(checkTime, 50000);Die Zeit hier ist nicht die Verzögerungszeit für den Button, sondern die Zykluszeit, in der die Funktion checkTime() aufgerufen wird. Diese solltest Du bei 500ms lassen: var callInterval = window.setInterval(checkTime, 500);Die Zeit, nach der der Button erscheint, wird hiermit eingestellt: var delay = 5;Diese hatte ich verkleinert, um beim Testen nicht so lange warten zu müssen; Du musst sie dann auf den richtigen Wert 50 setzen.
Anscheinend hast Du noch nicht verstanden, wie dieser Code funktioniert: Die Funktion checkTime() wird alle 500ms aufgerufen und ermittelt die Zeit, die das Video schon gespielt hat: var playTime = vid.currentTime; Anschließend prüft sie, ob die Zeit für das Einblenden des Buttons schon erreicht ist: if (playTime > delay) und macht diesen sichtbar, wenn es der Fall ist. vid.currentTime; berücksichtigt selbstverständlich die Pausetaste, d. h. wenn man diese drückt und das Video anhält, bleibt dieser Wert auch stehen.
 
Zuletzt bearbeitet:
Es geht - nun kam es auch bei mir an, wie das Ganze funktioniert :)
Ich danke dir und euch tausendfach!
DANKE
 
Nessi schrieb:
Ich danke dir und euch tausendfach!
DANKE
Zum Vergrößern anklicken....
Gern geschehen - schön, dass es jetzt trotz einiger Verwirrungen endlich funktioniert. :eagerness:

PS: mit if (playTime > delay) { wird das Banner auch eingeblendet, wenn man beispielsweise zu 1:00min springt.
Ist das in deinem Sinne oder soll es nur explizit zum Zeitpunkt 0:50 eingeblendet werden?
 
Was lange währt, wird doch noch gut :)

Julian schrieb:
Ist das in deinem Sinne oder soll es nur explizit zum Zeitpunkt 0:50 eingeblendet werden?
Zum Vergrößern anklicken....

Mit explizit ist gemeint, dass der Button genau bei 50 Sek. errscheint, auch wenn der Nutzer schon zu 1Min. "vorrückt"?
Sozusagen würde der Nutzer dann garnichts sehen?

Hm, gute Frage?! Kommt halt darauf an, ob ich davon ausgehe, dass der User sich das komplette Video ansieht oder ob dieser vorspringt...
Was müsste ich im
Code: 
if (playTime > delay) {
dann ändern?

Liebe Grüße
 
Nessi schrieb:
Mit explizit ist gemeint, dass der Button genau bei 50 Sek. errscheint, auch wenn der Nutzer schon zu 1Min. "vorrückt"?
Zum Vergrößern anklicken....
Genau. Ich kann dir jetzt auch nicht sagen, was davon sinnvoller ist, nur was du dazu ändern müsstest; und zwar wie in meinem Beispiel am Anfang:
Code: 
//if (playTime > delay) { ersetzen durch:

var min = delay - 0.5;
var max = delay + 0.5;
if(playTime > min && playTime < max){
Zur Erklärung: da eine Abfrage wie if(playTime === delay){ nicht funktioniert, da die Funktion alle 500ms und damit höchstwahrscheinlich nicht genau zu dem festgelegten Zeitpunkt aufgerufen wird, wird hier ein Toleranzbereich von 1s festgelegt und geprüft, ob sich die aktuelle Spielzeit des Videos exakt in diesem befindet.
 
Hallo zusammen,

da bin ich wieder :)
Das Ganze funktioniert wie gesagt einweindfrei zumindest auf Rechner die mit Windows 7 laufen - jetzt kommt das Dicke aber: bei Windows XP kommt die Meldung "Kein Video mit unterstützendem Format und MIME-Typ gefunden" :-/

Weiß jemand von euch vielleicht einen kleinen Trick?

Liebe Grüße
 
Auf XP läuft ja ein uralter IE, da muss man schauen, wie man das kompatibel bekommt. Welches konkrete Kommando betrifft das denn?
 
Habe das mp4-Video nun noch in *.ogg und *.webm umgewandelt und alle drei Videos verlinkt.
Nun läuft das Video auf XP und Firefox 32.0.3 aber im IE8 (ja ich weiß uralt) kommt nun ein weißer Bildschirm ohne jegliche Meldung.

Edit: Auf Safari und Windows 7 das gleiche wie mit IE8 und Windows XP.
Laut http://www.w3schools.com/html/html5_video.asp wird mp4 von Safari unterstützt.
Warum also der weiße Bildschirm.
 
Zuletzt bearbeitet:
Safari wurde für Windows seit etlichen Jahren nicht mehr weiterentwickelt, der ist also wie der IE auf XP zu sehen, nämlich einfach nur uralt. Da müsste man also auch auf Suche nach speziellen Lösungen gehen.
Der neueste Safari für Windows ist m.W. 5.1.7 von irgendwann aus 2012 oder noch älter: http://support.apple.com/kb/dl1531
 
kkapsner schrieb:
IE8 würde ich noch nicht hinten runter fallen lassen.
Zum Vergrößern anklicken....
Ja, der Meinung bin ich auch. Und da ich mir gerade mein eigenes kleines "Framework" baue, fällt mir immer wieder auf, dass man gerade für den IE 8 oft Extralösungen braucht. Meistens gibt es die betreffenden Funktionen nämlich erst ab dem IE 9. Zu schade, dass es den aber nicht mehr für XP gab. Und das ist auch der einzige Grund, warum ich den IE 8 noch unterstütze...
 
Ich bin ja eigentlich der Meinung, dass jeder, der mit XP im Internet unterwegs ist höchst fahrlässig handelt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben