Zeitverzögerung eines Buttons vom Video abhängig machen

Nessi · 28. Aug. 2014

mikdoe schrieb:
Nessi, falls es nochmal passiert, dass dein Beitrag nicht sofort angezeigt wird muss er freigeschaltet werden. Dann bitte nicht immer weiter posten sondern WARTEN, bis er freigeschaltet ist. Danke dir

Sorry, ich merks mir fürs nächste Mal ;-)

Das HTML5 Video läuft jetzt mit mp4-Format einwandfrei, allerdings besteht das Problem mit dem Button immernoch.
Ich habe nun x-Varianten durchprobiert -auch das Beispiel aus der voran gegangen Seite, aber es funktioniert nicht...
Anscheinend bin ich zu dusselig dafür :-/

Ich bin mir durchaus bewusst, dass die Frage nicht gern gesehen wird. Aber kann mir bitte jemand mit dem Quellcode für den CTA-Button auf die Sprünge helfen?

Habt dank!

Liebe Grüße

Sempervivum · 28. Aug. 2014

Dann poste doch mal, was Du versucht hast, damit wir den Fehler finden können. Am besten mit dem Code von Julian, denn der sollte funktionieren.

Nessi · 28. Aug. 2014

einer meiner vielen verzweifelten Versuche

Code:

<html>
<script type="text/javascript">
zeitinms = 50000; //Zeit in millisek. pro Bild
anzahl = 1; //Anzahl der Bilder
prefix = "bild";
function blendeEin(position, element){
  function checkTime(){
    var playTime = element.currentTime;
    var min = position - 1;
    var max = position + 1;
    if(playTime > min && playTime < max){
      blendeEin();
      window.clearInterval(callIntervall);
    }
  }
  var callInterval = window.setInterval(checkTime, 50);
}

window.onload = function(){
  showOn(50, document.getElementById("HTML5videoPlayer")); 
}
</script>

<body onLoad="blendeEin(1);">
<a href="Targetseite" target="blank"><img id="bild1" src="xxx.jpg" style="display:none" /></a>
</body>
</html>

Problem ist hier, zumindest das was ich erkenne, dass der nicht weiß, welches Bild er einblenden soll bzw. weiß ich nicht, wie ich ihm das sagen soll.
Ach menno :-/

j-l-n · 28. Aug. 2014

Wieso hast du den Funktionsnamen "showOn()" in "blendeEin()" geändert? So ruft die Funktion nur sich selbst auf...
Ich bitte dich, jetzt endlich einmal auf meinen Hinweis mit den globalen Variablen einzugehen!

Sempervivum · 28. Aug. 2014

Und bitte nicht zwei Aufrufe im Onload. Ab besten das document-ready benutzen, was es schon gibt. Und für die ID (Parameter von getElementById) musst Du die von deinem Video-Tag einsetzen:

Code:

<script>	
jQuery(document).ready(function($) {		
    wp_cta_load_variation( '159' , '' , '0' );
    showOn(50, document.getElementById("video-12-1")); 	
  });
</script>

Nessi · 29. Aug. 2014

Julian schrieb:
Ich bitte dich, jetzt endlich einmal auf meinen Hinweis mit den globalen Variablen einzugehen!

...wenn ich wüsste wie, hätte ich das schon lang getan

Nächster Versuch, der -welch Überraschung - natürlich auch nicht geht...
Ich könnte mich hier auf den Fußboden schmeißen :sorrow:

Code:

<html>
<script type="text/javascript">

function time {
var zeitinms = 50000; //Zeit in millisek. pro Bild
var anzahl = 1; //Anzahl der Bilder
var prefix = "bild";
}

function blendeEin(i) {
if (i < (anzahl+1)) {window.setTimeout(function(){ setdisplay(i); },zeitinms);}
}

function setdisplay(i) {
document.getElementById(prefix+i).style.display=""; i++; blendeEin(i);
}

function showOn(position, element){
  function checkTime(){
    var playTime = element.currentTime;
    var min = position - 1;
    var max = position + 1;
    if(playTime > min && playTime < max){
      blendeEin();
      window.clearInterval(callIntervall);
    }
  }
  var callInterval = window.setInterval(checkTime, 500);
}

window.onload = function(){
  showOn(50, document.getElementById("HTML5videoPlayer")); //nach 50s soll die Funktion blendeEin() aufgerufen werden
}

jQuery(document).ready(function($) {		
    wp_cta_load_variation( '159' , '' , '0' );
    showOn(50, document.getElementById("http://www.zielseite.de" target="blank"><img id="bild1" src="Bilderquelle.jpg")); 	
  });

</script>
</html>

Was ist denn nun wieder verkehrt? Je mehr ich mir darüber durchlese, umso weniger versteh ich irgendwas :-(

mikdoe · 29. Aug. 2014

Nessi schrieb:
...wenn ich wüsste wie, hätte ich das schon lang getan

Globale Variablen sind all diejenigen die nicht in einem Scope definiert werden. Ein Scope ist grob gesagt etwas, was innerhalb von geschweiften Klammern steht.

Und an deinem Code kann ich erkennen, dass du nicht mit der Fehlerkonsole (meistens F12) deines Browsers arbeitest. Denn function time {...} in Zeile 4 ist keine gültige JS Syntax.

Sempervivum · 29. Aug. 2014

@micdoe: Mir scheint, mit den globalen Varaiblen und dem Scope ist der TO noch überfordert.

@Nessi: Wofür machst Du denn die Klimmzüge mit dem i, wenn Du sowieso nur ein Bild hast? Das setTimeout in blendeEin() brauchst Du nicht, denn die Verzögerung kommt schon durch das setInterval in showOn() zu Stande. Und mit der Funktion time machst Du die Variablen für die die anderen Skriptteile unsichtbar. Und die ID für das Video-Tag hast Du auch nicht ausgetauscht.

Code:

<script type="text/javascript">
function blendeEin() {
document.getElementById("bild1").style.display="inline";
}

function showOn(position, element){
  function checkTime(){
    var playTime = element.currentTime;
    var min = position - 1;
    var max = position + 1;
    if(playTime > min && playTime < max){
      blendeEin();
      window.clearInterval(callIntervall);
    }
  }
  var callInterval = window.setInterval(checkTime, 500);
}

jQuery(document).ready(function($) {		
    wp_cta_load_variation( '159' , '' , '0' );
    showOn(50, document.getElementById("video-12-1")); 	
  });

</script>

Und das wp_cta_load_variation( '159' , '' , '0' ); in document-ready gab es schon an anderer Stelle. Gib acht, dass Du es nicht doppelt aufrufst.

j-l-n · 29. Aug. 2014

Nessi schrieb:
...wenn ich wüsste wie, hätte ich das schon lang getan

Hast du doch auch in der aktuellen Version - mit dem Schlüsselwort var. War übrigens auch alles auf der verlinkten Webseite nachzulesen.

Nessi schrieb:
Was ist denn nun wieder verkehrt?

Ziemlich viel, z.B. sind function time { oder document.getElementById("http://www.zielseite.de" target="blank"><img id="bild1" src="Bilderquelle.jpg")); wie mikdoe bereits erwähnte syntaktisch falsch.

Sempervivum schrieb:
Und für die ID (Parameter von getElementById) musst Du die von deinem Video-Tag einsetzen:

Code:

<script> jQuery(document).ready(function($) { wp_cta_load_variation( '159' , '' , '0' ); showOn(50, document.getElementById("video-12-1")); }); </script>

Hier ein valides, sauber eingerücktes Beispiel:

HTML:

<!DOCTYPE html>
<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"); //ohne die Funktion zu kennen: Zahlen übergibt man normalerweise nicht als String
        showOn(50, document.getElementById("video-12-1"));
      });
    </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>
    <video class="wp-video-shortcode" id="video-12-1" width="700" height="400" autoplay="true" preload="metadata" controls="controls">
      <source type="video/x-flv" src="http://example.com/video.flv" />
      <a href="http://example.com/video.flv">video.flv</a>
    </video>
    <div id="banner" style="display:none">
      <a href="http://example.com" target="blank" title="Zielseite">
        <img src="http://example.com/picture.jpg">
      </a>
    </div>
  </body>
</html>

mikdoe · 29. Aug. 2014

Julian, warum zwei <script> Blöcke? Und wieso src="https://code.jquery.com/jquery-1.11.1.min.js" anstatt src="//code.jquery.com/jquery-1.11.1.min.js"? Und warum jQuery 1.11 anstatt 2.1.1?
Den Inhalt von $(document).ready könntest du an das Ende des <body> setzen und somit auf $(document).ready ganz verzichten.

j-l-n · 29. Aug. 2014

mikdoe schrieb:
Julian, warum zwei <script> Blöcke?

Wieso auch nicht?

Und wieso src="https://code.jquery.com/jquery-1.11.1.min.js" anstatt src="//code.jquery.com/jquery-1.11.1.min.js"? Und warum jQuery 1.11 anstatt 2.1.1?

Hab ich ausgebessert. jQuery 2.x unterstützt den IE8 nicht.

Nessi · 29. Aug. 2014

Vielen vielen Dank erst einmal für die vielen wirklich sehr umfangreichen und helfenden Antworten.

ABER: Es geht immernoch nicht :-(
Ich schiebe es einfach mal darauf, dass ich weiblich bin...

In meiner Beitragsseite von Wordpress habe ich nun den (gott sei dank funktionierenden) HTML5 Player und einen Verweis mit eckigen Klammern auf das CTA. Daher kommt im übrigen auch die 159 - das ist die ID des Call-to-Action Buttons.

Die Seite des CTAs beherbergt nun den angepassten Quellcode von Julian.

Im Forntend wird aber immernoch bloß das HTML5 Video abgespielt, ohne das der Button zu irgendeiner Zeit erscheint.

Ich habe auch schon das HTML5 Video im Beitrag gelöscht und nur den Verweis auf das CTA drin gelassen - da bleibt die Seite komplett leer.
Anscheinend bin ich wirklich zu blöde dafür...

j-l-n · 29. Aug. 2014

Nessi schrieb:
Anscheinend bin ich wirklich zu blöde dafür...

Quatsch, jeder war mal Anfänger und man wird besser, je mehr und länger man sich damit beschäftigt.
Zeig doch mal denn aktuellen Quellcode, so wie er in der jetzigen Version im Browser ankommt!

Nessi · 29. Aug. 2014

Du bist so geduldig - danke

Der Code sieht nun aktuell so aus

Code:

<h1>Überschift</h1>
<p><video width="700" height="400" controls id="HTML5videoPlayer"><source src="video.mp4" type="video/mp4"><strong>The HTML5 video tag is not supported by Your browser. Can’t play video</strong><br />
   <a href="video.mp4">Download the video</a></video></p>
<script>	
  jQuery(document).ready(function($) {		
  wp_cta_load_variation( '159' , '' , '0' )	 
});
</script>
<style type="text/css" id="wp_cta_css_custom_159_0" class="wp_cta_css_159 "> 
</style>

<script type="text/javascript" id="wp_cta_js_custom">jQuery(document).ready(function($) {
 });
</script>
<div style="float:left;">
  <div id='wp_cta_159_container' class='wp_cta_container cta_outer_container' style='margin-top:0px;margin-bottom:0px;position:relative;' >
    <div id='wp_cta_159_variation_0' class='inbound-cta-container wp_cta_content wp_cta_variation wp_cta_159_variation_0' style='display:none; margin:auto; width: 50px; height: 100px;'  data-variation='0' data-cta-  id='159'><div id="blank-cta-template">
<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>
    <video class="wp-video-shortcode" id="video" width="700" height="400" autoplay="true" preload="metadata" controls="controls">
      <source type="video/mp3" src="http://....de/video" />
      <a href="http://....de/video"></a>
    </video>
    <div id="banner" style="display:none">
      <a href="http://xyz.de" target="blank" title="Zielseite">
        <img src="http://.../CTA.jpg">
      </a>
    </div>
  </body>
</html>

- - - Aktualisiert - - -

...ich hoffe, man sieht dort einigermaßen durch

mikdoe · 29. Aug. 2014

Nessi, lass das Laden von jQuery mal lieber ganz oben im <head> stehen! Sowas macht man wenn möglich immer ganz oben.

Nessi · 29. Aug. 2014

iQuery steht eigentlich im Head. Ich kopiere nochmal die beiden Seiten rein, vielleicht wird das übersichtlicher...

Und zwar einmal der Beitrag:

Code:

<head>
</head>
<body>
<h1>Überschrift...</h1>
<video width="700" height="400" controls id="HTML5videoPlayer">
   <source src="http://.../video.mp4" type="video/mp4">
   <strong>The HTML5 video tag is not supported by Your browser. Can't play video</strong><br>
   <a href="http://forum.jswelt.de/javascript/javascript/javascript/.../video.mp4">Download the video</a>
</video>
[cta id="159" align="left"] //Das ist die "Verlinkung" zum CTA
</body>

Und einmal das dazugehörige CTA:

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("video"));
      });
    </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>
    <video class="wp-video-shortcode" id="video" width="700" height="400" autoplay="true" preload="metadata" controls="controls">
      <source type="video/mp4" src="video.mp4" />
      <a href="http:/.../video.mp4"></a>
    </video>
    <div id="banner" style="display:none">
      <a href="http://ziel.de" target="blank" title="Zielseite">
        <img src="http://.../CTA_1.jpg">
      </a>
    </div>
  </body>
</html>

Ich hoffe so ist es vielleicht ersichtlicher

j-l-n · 29. Aug. 2014

Du musst an dieser Stelle:

Code:

$(document).ready(function(){
        wp_cta_load_variation("159", "", "0"); 
        showOn(50, document.getElementById("Testverkauf"));
      });

die ID des <video>-Tags angeben. Also "video".

Nessi · 29. Aug. 2014

Sorry, das ist ein Fehler meinerseits.
Das Video heißt eigentlich Testverkauf und nicht video.
Ich habs beim Kopieren vergessen zu "verfälschen".

Edit: ist oben korrigiert

j-l-n · 29. Aug. 2014

Bitte sieh einmal nach, ob in der Fehlerkonsole etwas steht!

Nessi · 29. Aug. 2014

Ich habe CSS und Netz ausgeschaltet.
Unter JavaScript steht folgendes:

TypeError: jQuery.totalStorage is not a function page-tracking.js:460
TypeError: jQuery.totalStorage is not a function cta-load-variation.js:4

Zeitverzögerung eines Buttons vom Video abhängig machen

New member

Banned

New member

j-l-n

Guest

Banned

New member

Moderator

Banned

j-l-n

Guest

Moderator

j-l-n

Guest

New member

j-l-n

Guest

New member

Moderator

New member

j-l-n

Guest

New member

j-l-n

Guest

New member