Zeitverzögerung eines Buttons vom Video abhängig machen

Nessi · 26. Aug. 2014

[GELÖST] Zeitverzögerung eines Buttons vom Video abhängig machen

Hallo zusammen,

ich bin die Neue und nun öfter hier

Leider bin ich in der JS-Welt noch absoluter Newbie, aber dank dieses Forums habe ich es schomal hinbekommen, einen zeitversetzten Button auf meiner Seite einzupflegen - ja ich bin schon ein bisschen stolz auf mich.

Zum eigentlichen Thema:
Ich habe ein Video auf einer Seite und eben dieses besagte JS für den Button. Der Button wird nach 50 Sek. eingeblendet. Egal, ob das Video weiterläuft oder nicht. Ergo: Drückt man im Video Pause, erscheint der Button zu zeitig und ergibt somit keinen Sinn mehr zum Video

Ist es möglich, das Script mit dem Video (*.flv) zukoppeln? Sodass das die Zeit nicht weiterläuft, sobald jemand Pause, Stop u.a. drückt und wiederrum weiterzählt, wenn das Video wieder mit Play gestartet wird?
Ich hoffe Ihr versteht mein Anliegen.

Hier noch der Code für den Button, der aus einem Image besteht:

Code:

<html>
<script type="text/javascript">
   zeitinms = 50000; //Zeit in millisek. pro Bild
   anzahl = 1; //Anzahl der Bilder
   prefix = "bild";
   function blendeEin(i) {
      if (i < (anzahl+1)) {window.setTimeout("setdisplay("+i+")",zeitinms);}
      }

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

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

Vielen Dank für eure geschätzte Hilfe.
Liebe Grüße
Nessi

j-l-n · 26. Aug. 2014

Wie wird denn das Video abgespielt bzw. eingebunden?

Ansonsten noch einige Anmerkungen:

das language-Attribut ist veraltet -> weg damit!
ein Countdown mit setTimeout ist ziemlich ungenau. Aber das ist ein schon etwas komplizierteres Thema in JS. Is there a more accurate way to create a Javascript timer than setTimeout? - Stack Overflow
ich versteh die Skriptlogik jetzt nicht ganz, aber ich bin mir ziemlich sicher, dass an dieser Stelle
"setdisplay("+i+")"
nicht der String "+i+", sondern eine Variable übergeben werden soll...
es ist schlechter Stil, setTimeout einen String statt einer Funktionsreferenz zu übergeben. Will man dennoch Parameter verwenden, hilft eine anonyme Funktion
Code:
```
window.setTimeout(function(){ setdisplay(i); },zeitinms);}
```
du solltest deinen Code dringend strukturieren und einrücken - in der bisherigen Form ist er schwer verständlich...
es gibt kein onLoad-Event, sondern nur ein onload.
globale Variablen sollten unbedingt vermieden werden! Javascript Globale und lokale Variablen
in JS ist es üblich, Funktionsnamen in CamelCase zu schreiben: blendeEin() - das macht anderen das Lesen und Nachvollziehen deines Codes leichter

PS: verwende für Code bitte die

Code:

-Tags![/b]

tsseh · 26. Aug. 2014

Nessi schrieb:
Ist es möglich, das Script mit dem Video (*.flv) zukoppeln?

ich sehe nicht wo und wie das video eingebunden ist

Julian schrieb:
[*]ein Countdown mit setTimeout ist ziemlich ungenau.

sehe ich nicht so, setTimeout arbeitet ausreichend genau

Julian schrieb:
[*]es gibt kein onLoad-Event, sondern nur ein onload.

doch, gibt es und ein ONLOAD und ein OnLoAd, ...

Julian schrieb:
[*]in JS ist es üblich, Funktionsnamen in CamelCase zu schreiben: blendeEin()

ist es das?
ich würde z.b. fadeIn verwenden, aber blendeein funktioniert genauso

j-l-n · 26. Aug. 2014

hesst schrieb:
doch, gibt es und ein ONLOAD und ein OnLoAd, ...

Nein, ein ONLOAD-Event gibt es in JavaScript nicht. Sorry, sorry, dass ich "in JavaScript" und den Hinweis, dass JS case-sensitive ist, vergessen habe...

hesst schrieb:
ist es das?
ich würde z.b. fadeIn verwenden, aber blendeein funktioniert genauso

@Korbinian: Wenn ich mir die vollständige Antwort von dir "leihen" darf:

kkapsner schrieb:
die meisten Schreiben JS mit der Namenskonvention, die auch im JS-Core verwendet wird. Funktions- und Variablennamen klein im CamelCase. Nur Konstruktoren werden groß geschrieben. Wenn du das einhälst, erleichterst du anderen das Lesen/Verstehen deines Codes.

kkapsner schrieb:
nein hesst - ich werde nicht diskutieren

@mikdoe: du hattest recht, der 2.000ste kam genauso schnell wie der 1.000ste :triumphant:

jetzt hab ich das aber wieder übersehn und erst gerade eben bemerkt... :stupid:

Sempervivum · 26. Aug. 2014

Der Button wird nach 50 Sek. eingeblendet.

Was ist denn dein Ziel dabei? Soll der Button zum Ende des Videos sichtbar werden? Das kann man nämlich wesentlich einfacher und genauer mit dem Event "onended" realisieren.
PS: Wenn Du jedoch den Button mitten im Video sichtbar machen willst, kannst Du mit setInterval() und currentTime die abgespielte Zeit abfragen.

xorg1990 · 26. Aug. 2014

Lol:

nein hesst - ich werde nicht diskutieren

Aber ich werde diskutieren

hesst schrieb:
sehe ich nicht so, setTimeout arbeitet ausreichend genau

Zumindest ausreichend genau für diese Sache, aber um es genau zu nehmen, einfach mal hier rein schauen: A Tale of Two Clocks - Scheduling Web Audio with Precision - HTML5 Rocks

Woher der Computer weiß wievielt Zeit vergangen ist steht hier erklärt, zwar anhand eines Microcontrollers aber egal.
AVR-Tutorial: Timer - Mikrocontroller.net

@Nessi, ignoriere am besten die Diskussion und schrieb uns erst einmal wie du das Video eingebunden hast.

tsseh · 26. Aug. 2014

Julian schrieb:
Nein, ein ONLOAD-Event gibt es in JavaScript nicht. Sorry, sorry, dass ich "in JavaScript" und den Hinweis, dass JS case-sensitive ist, vergessen habe...

ja und? alkohol gibt es in mineralwasser auch nicht, trotzdem poste ich das nicht

die meisten Schreiben JS mit der Namenskonvention, die auch im JS-Core verwendet wird. Funktions- und Variablennamen klein im CamelCase. Nur Konstruktoren werden groß geschrieben.

die meisten machen das vielleicht, "in js" kannst du das aber schreiben wie du möchtest.

Nessi · 27. Aug. 2014

Guten Morgen zusammen,

danke für die zahlreichen Antworten und das Feedback.
Leider verstehe ich nur ein Drittel von dem, was ihr geschrieben habt ;-(

Sempervivum schrieb:
Was ist denn dein Ziel dabei? Soll der Button zum Ende des Videos sichtbar werden? Das kann man nämlich wesentlich einfacher und genauer mit dem Event "onended" realisieren.
PS: Wenn Du jedoch den Button mitten im Video sichtbar machen willst, kannst Du mit setInterval() und currentTime die abgespielte Zeit abfragen.

Nein, der Button soll nicht zum Ende sondern mittendrin erscheinen. Halt genau dann, wenn das Video bei 50 Sek. ist.
Wie realsiere ich das mit setInterval() und currentTime?

xorg1990 schrieb:
@Nessi, ignoriere am besten die Diskussion und schrieb uns erst einmal wie du das Video eingebunden hast.

Nochmal zum besseren Verständnis:
Das Video ist per Plugin auf der Seite (Wordpress) eingebunden und noch nicht mit dem oben angegebenen Quellcode verknüpft.
Wie kann ich den Quellcode des Buttons also so ändern, dass, wenn ich Pause oder Stop bei dem Video drücke, der Counter des Buttons nicht weiterzählt, sondern erst, wenn ich das Video wieder weiterlaufen lasse?

Nochmal vielen Dank.

Liebe Grüße
Vanessa

tsseh · 27. Aug. 2014

Nessi schrieb:
Das Video ist per Plugin auf der Seite (Wordpress) eingebunden und noch nicht mit dem oben angegebenen Quellcode verknüpft.
Wie kann ich den Quellcode des Buttons also so ändern, dass, wenn ich Pause oder Stop bei dem Video drücke, der Counter des Buttons nicht weiterzählt, sondern erst, wenn ich das Video wieder weiterlaufen lasse?

dazu müsste man wissen, wie das video eingebunden ist

j-l-n · 27. Aug. 2014

hesst schrieb:
die meisten machen das vielleicht, "in js" kannst du das aber schreiben wie du möchtest.

Natürlich kannst du das, deswegen schrieb ich ja auch nicht "in JS wird das so geschrieben", sondern

Julian schrieb:
in JS ist es üblich

, was genau

hesst schrieb:
die meisten machen das

bedeutet.

Nessi schrieb:
Das Video ist per Plugin auf der Seite (Wordpress) eingebunden und noch nicht mit dem oben angegebenen Quellcode verknüpft.

Welches Plugin ist das genau?

Ich täte dir empfehlen, erst einmal diese Liste abzuarbeiten und für ein valides, sauberes HTML-Grundgerüst zu sorgen. Im jetzigen Zustand ist das HTML nämlich nicht nur nicht eingerückt, sondern invalid und das Skript wird gar nicht ausgeführt, da der beginnende <script>-Tag fehlt.
Folgende zwei Verbesserungen kannst du schnell und einfach vornehmen:

Julian schrieb:
-es ist schlechter Stil, setTimeout einen String statt einer Funktionsreferenz zu übergeben. Will man dennoch Parameter verwenden, hilft eine anonyme Funktion

Code:

window.setTimeout(function(){ setdisplay(i); },zeitinms);}

-globale Variablen sollten unbedingt vermieden werden! Javascript Globale und lokale Variablen

- - - Aktualisiert - - -

Ein Beispiel für die Abfrage via currentTime:
Angenommen, du bindest das Video direkt in HTML5 ein:

HTML:

<video width="320" height="240" controls id="HTML5videoPlayer">
   <source src="video.ogg" type="video/ogg">
   <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>

Code:

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
}

tsseh · 27. Aug. 2014

Julian schrieb:
Natürlich kannst du das, deswegen schrieb ich ja auch nicht "in JS wird das so geschrieben", sondern

in JS ist es üblich

Zum Vergrößern anklicken....

, was genau

die meisten machen das

Zum Vergrößern anklicken....

bedeutet.

oder "in js ist es normal" oder "in js ist es regulär"
wenn du verbreitet meinst, schreib das auch, wobei dann schon wieder fraglich ist, was das "in JS" da zu suchen hat, verbreitet ist es nämlich in vielen Sprachen, nur erwähnt man das meist nicht extra kontextlos(und vor allem nicht noch mit dem (genauso sinnlosen) onLoad punkt obendrüber).

Nessi · 27. Aug. 2014

hesst schrieb:
dazu müsste man wissen, wie das video eingebunden ist

Einfach über Klammer-Video-Klammer

Julian schrieb:
Im jetzigen Zustand ist das HTML nämlich nicht nur nicht eingerückt, sondern invalid und das Skript wird gar nicht ausgeführt, da der beginnende <script>-Tag fehlt.

Doch, das Skript funktioniert einwandfrei. Nach 50Sek. erscheint der Button - natürlich nur sofern man das einleitende Tag verwendet ;-)
Vielleicht hilft es zum Verständnis, wenn ich den Code der kompletten Seite zeige:

Code:

<head>
<body>
<h1>Überschrift</h1>

[video width="XXX" height="XXX" flv="XXX" autoplay="true"][/video]

[cta id="159" align="left"]  //Das ist die Plugin-Einbindung für den Button
</body

Der Code für den Button, welcher unter dem CTA-Plugin hinterlegt ist:

Code:

<html>
<script type="text/javascript">
   zeitinms = 50000; //Zeit in millisek. pro Bild
   anzahl = 1; //Anzahl der Bilder
   prefix = "bild";
   function blendeEin(i) {
      if (i < (anzahl+1)) {window.setTimeout("setdisplay("+i+")",zeitinms);}
      }

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

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

tsseh · 27. Aug. 2014

Julian schrieb:
Angenommen, du bindest das Video direkt in HTML5 ein:

dann kann man dan aber genausogut auf timeupdate reagieren
das videoelement feuert auch pause und play, wobei man dann aber das nachladen beachten müsste

- - - Aktualisiert - - -

[video width="XXX" height="XXX" flv="XXX" autoplay="true"][/video] // das ist kein HTML
[cta id="159" align="left"] //Das ist die Plugin-Einbindung für den Button

Nessi · 27. Aug. 2014

hesst schrieb:
[video width="XXX" height="XXX" flv="XXX" autoplay="true"][/video] // das ist kein HTML

Das habe ich ja auch nie behauptet - das ist die einfache Einbindung für das Standartplugin von Wordpress

Edit: So richtig weiß ich immernoch nicht weiter :-(

tsseh · 27. Aug. 2014

Nessi schrieb:
Das habe ich ja auch nie behauptet - das ist die einfache Einbindung für das Standartplugin von Wordpress

aber das nützt uns nichts, was kommt denn im html raus?

Nessi · 27. Aug. 2014

Laut Seitenquelltext folgender:

Code:

<body>
<h1>Überschrift</h1>
  <div style="width: 700px; max-width: 100%;" class="wp-video">
    <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://xxxx" />
        <a href="http://xxxx.flv">xxxx.flv</a>
    </video>
   </div>

<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">
</div>
     </div>
         </div>
            </div>

<html>
//hier kommt der Quellcode des CTA Buttons
</html>

j-l-n · 27. Aug. 2014

Wenn das wirklich der gesamte Seitenquelltext ist, ist er massiv invalid. Ich fände es übrigens schön, wenn du auf den Hinweis, globale Variablen zu vermeiden und setTimeout keinen String sondern eine Funktionsreferenz zu übergeben, eingehen würdest...

tsseh · 27. Aug. 2014

Nessi schrieb:
Laut Seitenquelltext folgender:

und damit ist klar, es ist ein html5 video element. dazu wurde eigentlich alles gesagt, sogar mit beispiel.
hier noch ein paar links
Using HTML5 video events (Windows)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
sollte doch alles klar sein?!

Nessi · 27. Aug. 2014

Julian schrieb:
Wenn das wirklich der gesamte Seitenquelltext ist, ist er massiv invalid.

Nein, das ist nur der Ausschnitt für das Video.

Julian schrieb:
Ich fände es übrigens schön, wenn du auf den Hinweis, globale Variablen zu vermeiden und setTimeout keinen String sondern eine Funktionsreferenz zu übergeben, eingehen würdest...

hesst schrieb:
sollte doch alles klar sein?!

Naja, klar ist was anderes, aber ich versuche mein Bestes. Erstmal muss ich mich reinlesen.
Mit hoher Wahrscheinlichkeit kommt morgen dann die nächste Rückfrage meinerseits.

Erstmal vielen Dank

mikdoe · 28. Aug. 2014

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

Zeitverzögerung eines Buttons vom Video abhängig machen

New member

j-l-n

Guest

Lounge-Member

j-l-n

Guest

Banned

New member

Lounge-Member

New member

Lounge-Member

j-l-n

Guest

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

j-l-n

Guest

Lounge-Member

New member

Moderator