Gif-Videos abspielen lassen mit Ankerpunkten

  • Hallo Leute,


    ich habe im Dezember angefangen zu programmieren, dementsprechend habe ich noch nicht so viel Ahnung. Vor allem nicht wenn es um JavaScript geht.


    Konkret möchte ich auf einer Seite gifs einbauen die sich mit Ankerpunkten abspielen lassen. Z.B.: Ich setze einen Ankerpunkt in die Mitte des Bildschirmes und einen Ankerpunkt in die Mitte des gifs, wenn sich dann die Ankerpunkte treffen (z.B.: beim runter scrollen der Seite) wird das gif abgespielt bis es vorbei ist. Beim nächsten gif genau das gleiche. Also es soll nicht abrupt Enden wenn die Ankerpunkte sich nicht mehr berühren, sondern noch zu Ende abspielen auch wenn schon das nächste gif den Ankerpunkt berührt hat.


    Gerade sieht es auf der Seite so aus, dass die gifs sich im Loop abspielen und nur zu sehen sind wenn man mit der Maus drüber fährt. Ich habe darüber schwarze Rechtecke (als png-Bilder) gesetzt die, die ganze Zeit zu sehen sind und dementsprechend verschwinden wenn man mit der Maus drauf kommt.



    Genau, ich hoffe dass es verständlich genug erklärt wurde und mir jemand bei dem Problem aushelfen könnte. :)

  • Zitat

    Gerade sieht es auf der Seite so aus, dass die gifs sich im Loop abspielen und nur zu sehen sind wenn man mit der Maus drüber fährt. Ich habe darüber schwarze Rechtecke (als png-Bilder) gesetzt die, die ganze Zeit zu sehen sind und dementsprechend verschwinden wenn man mit der Maus drauf kommt.

    Dann bist Du ja schon relativ weit :-) Den Start der Animation eines GIFs kannst Du erzwingen, indem Du das src-Attribut neu setzt, zur Sicherheit mit einem Zeitstempel, damit die URL eine andere ist:

    Code
    1. <img id="gif1" src="gif.gif">
    2. <script>
    3. document.getElementById('gif1').src = 'gif.gif?time=' + Date.now();
    4. <script>

    Allerdings lässt sich der Ablauf eines GIFs durch Javascript nicht steuern und es gibt auch keine Events z. B. für das Ende der Animation. Wenn ein GIF nur einmal spielen soll, musst Du das im GIF selber so anlegen oder es durch einen Timer wieder unsichtbar machen. Was nicht hundertprozentig genau wäre, aber ein gangbarer Weg.

  • Hey Leute,


    also ich habe seit dem einiges ausprobiert und es klappt irgendwie nicht, der Plan vom Aufbau der Seite hat sich ebenfalls geändert.


    Wie die Seite Aktuell aussieht:

    Ich habe mit einem onmouseover Code die gifs so eingestellt, dass die (wie am Anfang) mit einem schwarzem Rechteck verdeckt sind und erst zu sehen sind wenn man mit der Maus drüber fährt. Wenn man wieder weg geht ist es jetzt so, dass der gif anhält und so bleibt.


    Der Code ist folgendermaßen aus:


    <div class="col-md-6 title">

    <img class="gifthumb" id="gif11" src="assets/_02_Film/Content/Black.png" onMouseOver="this.src='assets/_02_Film/Content/A11.gif';" onMouseOut="this.src='assets/_02_Film/Content/A11_thumb.png';">

    </div>


    Alles läuft es funkt und ich bin zufrieden.


    Aber ein Problem hatte ich bis eben nicht im Kopf: Es wird auf dem Tablet oder Smartphone nicht funktionieren da man dort keine Maus hat zum hovern.

    Also das Problem ist eigentlich immer noch der Gleiche, nur dass es diesmal nur für Tablets und Smartphones funktionieren soll.


    Währe super wenn mir jemand aushelfen könnte.


    Danke sehr!

  • Dann hast Du das mit den Ankerpunkten, dass die GIFs anfangen zu spielen, wenn sie beim Scrollen sichtbar werden, aufgegeben?


    Das Problem, dass es auf Touchgeräten kein Hover gibt, haben die Browserhersteller auch erkannt und in den meisten Browsern einen Ersatz gebaut: Touch wirkt wie Mouseover und erneuter Touch irgend wo anders wie Mouseout. Genauer habe ich das noch nicht untersucht, vor allem nicht auf Apple-Geräten, weil ich kein Iphone habe. Versuche es einmal.

  • Dann hast Du das mit den Ankerpunkten, dass die GIFs anfangen zu spielen, wenn sie beim Scrollen sichtbar werden, aufgegeben?

    Ja, leider. Muss ich aber wahrscheinlich jetzt wieder aufnehmen. Ich kann ja nicht den onmouseover-Code einfach ausschalten für Touchgeräte?


    Ich denke die beste Lösung sind dann einfach die Ankerpunkte. Bräuchte jetzt nur noch ein paar Lösungsansätze.

  • Hier das Skript, das ich entwickelt habe:

    Füge es am Ende des Body, vor dem schließenden </body>, ein.


    Die img-Tags für die GIFs müssen damit so aussehen:

    <img id="img1" data-src="images/laola.gif?time=">


    Das Skript ist erst Mal eine Basisversion. Es spielt das GIF, wenn es etwa in der Mitte des Browserfenster ist.