Video HTML5 funzione autoplay non funziona in fullpage.js

mio HTML5 video in autoplay non funziona.

<video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo">

Ho provato anche senza il =valore”vero”, e non funziona. Ho già utilizzato lo stesso codice anche in altri siti e ha funzionato bene.

Sto usando un framework basato su fullPage.js ma ho cercato qualcosa sul file e non ho trovato niente.

Il sito è a http://agenciamilk.com/site/2/ se vuoi dare un’occhiata. Grazie

autoplay="autoplay" invece di “vero”.
ho provato sia autoplay="autoplay" e solo autoplay e ancora non funziona…

InformationsquelleAutor Filipe Teixeira | 2014-08-21

5 risposte

  1. 9

    Si dovrebbe usare il afterRender richiamata la fullpage.js il plugin offre.

    afterRender()

    Questo callback viene licenziato solo dopo che la struttura della pagina è stata generata. Questo è il callback che si desidera utilizzare per inizializzare altri plugin o fuoco di codice che richiede il documento per essere pronto (come questo plugin modifica il DOM per creare la struttura risultante).

    Si può dare un’occhiata a un esempio vivo qui o si può anche trovare in gli esempi cartella del fullpage.js il download.

    E si può facilmente vedere il codice sorgente del suo utilizzo:

    $(document).ready(function () {
        $('#fullpage').fullpage({
            verticalCentered: true,
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            afterRender: function () {
    
                //playing the video
                $('video').get(0).play();
            }
        });
    });

    AGGIORNAMENTO

    Questo non è più necessario fullpage.js > 2.6.6.
    Si riproduce automaticamente il video quando si accede alla sezione per quanto il tag autoplay:

    <video autoplay loop muted controls="false" id="myVideo">
        <source src="imgs/flowers.mp4" type="video/mp4">
        <source src="imgs/flowers.webm" type="video/webm">
    </video>

    Nel caso In cui si desidera solo giocare è sul punto di carico (non al caricamento della pagina) utilizzare data-autoplay.
    Ulteriori informazioni la documentazione.

    Grazie, che ha lavorato parzialmente. Il fatto è che io sto costruzione di una pagina con 3 diversi “diapositive”, ognuna con un video di sfondo. Così ora, solo il primo video è autoplaying. Devo cambiare qualcosa che afterRender di callback per consentire a più video?
    Quindi si dovrebbe utilizzare il afterSlideLoad richiamata e per riprodurre il video caricato diapositiva.
    in realtà volevo dire sezioni, non scivola… comunque, ho controllato la richiamata pagina su github e ora stavo cercando qualcosa di simile a questo: $(document).ready(function () { $('#fullpage').fullpage({ verticalCentered: true, anchors: ['Page1', 'Page2', 'Page3', 'Page4'], sectionsColor: ['#000000', '#1eacd7', '#e0382d', '#1eacd7'], afterRender: function () { //playing the video $('video').get(0).play(); }, afterLoad: function(Page2,2){ if(index == '2'){ $('video').get(0).play(); } } }); });
    L’ultimo commento ricevuto disordinato, e aveva alcuni errori. Sto cercando questo e ancora non funziona: $(document).ready(function () { $('#fullpage').fullpage({ afterRender: function () { //playing the video $('video').get(0).play(); }, afterLoad: function(anchorLink, index){ //using index if(index == '2'){ $('video').get(0).play(); } //using anchorLink if(anchorLink == 'Page2'){ $('video').get(0).play(); } } });
    creare un violino..

    InformationsquelleAutor Alvaro

  2. 1

    Mi dispiace di non avere abbastanza rep commentare ancora. Hai cercato:

    autoplay="autoplay"

    ?

    InformationsquelleAutor M.Bush

  3. 1

    È possibile utilizzare il “isInViewport” plugin (link qui sotto) per trovare video che è attualmente in viewport e di eseguire del codice js di conseguenza.

    $(function () {
        $('#fullpage').fullpage({
            verticalCentered: true,
            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
            afterRender: function () {
                $('video').each(function () {
                    if ($(this).is(":in-viewport")) {
                        $(this)[0].play();
                    }
                }
        });
    });

    Nudo in mente che scorrono ogni elemento video non è il metodo più efficiente di impiegare, ma questo dovrebbe essere sufficiente per iniziare.

    jQuery plugin: isInViewport

    InformationsquelleAutor CalisZA

  4. 0

    O si può semplicemente utilizzare autoplay proprietà, qualcosa di simile a

    <video preload="auto" autoplay loop="loop" muted="muted" volume="0" id="myVideo">
    //----use just this one---^

    InformationsquelleAutor Suman Bogati

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *