Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Far fare una funzione solamente una volta

    Ciao ragazzi, sono uno che fa codici per passione e mi sono imbattuto in un problema che sicuramente riuscireste a risolvere a occhi chiusi. Spero in un'Anima Pia che possa darmi una mano.

    Praticamente in una pagina ho messo un video avente questo codice HTML:
    codice:
    <video paused aria-hidden="true" id="myVid" src="video/miovideo.mp4" type="video/mp4">
    in Javascript praticamente ho stabilito che il video deve andare in play dopo i 650px con questo codice:

    codice:
    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
    
    if (document.body.scrollTop > 650  ||  document.documentElement.scrollTop > 650) {
    document.getElementById('myVid').play() 
    } else {
    document.getElementById('myVid').pause()
    }
    
    Ora la mia domanda � questa:
    Visto considerato che va in play superando sempre i 650 px, ovviamente se torno sopra i 650 px e torno giu di nuovo, il video si mette in play di nuovo. Vorrei evitarlo!
    C'è un modo che una volta fatta la funzione, non si ripeta pi�? Posso far in modo che il video venga messo in play solamente una volta?

    PS: un modo l'ho anche trovato � quello di togliere l'id al tag <video> ma cos� facendo poi guardando la consolle del browser mi da errore ed � una cosa che non tollero!
    Ultima modifica di ciro78; 06-03-2021 a 15:33 Motivo: tag code

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,355
    Quote Originariamente inviata da dokkalemon Visualizza il messaggio
    Ciao ragazzi, sono uno che fa codici per passione e mi sono imbattuto in un problema che sicuramente riuscireste a risolvere a occhi chiusi. Spero in un'Anima Pia che possa darmi una mano.

    Praticamente in una pagina ho messo un video avente questo codice HTML:
    codice:
    <video paused aria-hidden="true" id="myVid" src="video/miovideo.mp4" type="video/mp4">
    in Javascript praticamente ho stabilito che il video deve andare in play dopo i 650px con questo codice:

    codice:
    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
    
    if (document.body.scrollTop > 650  ||  document.documentElement.scrollTop > 650) {
    document.getElementById('myVid').play() 
    } else {
    document.getElementById('myVid').pause()
    }
    
    Ora la mia domanda � questa:
    Visto considerato che va in play superando sempre i 650 px, ovviamente se torno sopra i 650 px e torno giu di nuovo, il video si mette in play di nuovo. Vorrei evitarlo!
    C'è un modo che una volta fatta la funzione, non si ripeta pi�? Posso far in modo che il video venga messo in play solamente una volta?

    PS: un modo l'ho anche trovato � quello di togliere l'id al tag <video> ma cos� facendo poi guardando la consolle del browser mi da errore ed � una cosa che non tollero!
    Ciao e benvenuto sul forum,
    ti invito a leggere il regolamento del forum stesso ed in particolare la sezione di titoli e utilizzo del tag code.

    In merito al tuo problema ti basta mettere una variabili di controllo.

    codice:
    var eseguito = false;
    
    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
    
    if (!eseguito && (document.body.scrollTop > 650  ||  document.documentElement.scrollTop > 650)) {
    document.getElementById('myVid').play();
    eseguito =  true;
    } else {
    document.getElementById('myVid').pause()
    }
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,891
    Ciao, si può risolvere in millemila modi. Per logica, se vuoi che vada in play e non si interrompa, non serve applicare la pausa, basta eliminare la riga in cui c'è quel pause().

    Un approccio migliore può essere quello di usare, al posto del gestore onscroll, i metodi addEventListener() e removeEventListener(), in modo da applicare inizialmente la funzione come gestore dello scroll e rimuoverla non appena avviene la condizione specifica.

    Qui un esempio:
    codice:
    window.addEventListener('scroll', function playVideo(){
       if (document.body.scrollTop > 650 || document.documentElement.scrollTop > 650) {
          document.getElementById('myVid').play();
          window.removeEventListener('scroll', playVideo);
       } 
    });
    Poi, ripeto, si può fare in tanti altri modi.



    EDIT: anche come suggerisce ciro78, con un flag ... ho visto la risposta qualche minuto dopo
    Ultima modifica di KillerWorm; 06-03-2021 a 15:46
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.