Galeria OwlCarousel com vídeo e autoplay

Estive tentando manipular uma galeria OwlCaroulsel com vídeo, no tema porto do wordpress, mas quando eu adicionava um item do tipo vídeo ele não dava autoplay… Eu precisava clicar manualmente, mesmo tentando atacar por javascript ele não dava play, apenas quando clicava na barra de controle do vídeo.

Então comecei minha caminhada para tentar solucionar este problema, cheguei na conclusão que precisaria adicionar o elemento de vídeo dinamicamente, acredito que seja uma trava de segurança se caso o vídeo estiver oculto na página, não deixar dar autoplay, tendo em vista que ele era o último item da galeria.

jQuery(document).ready(function(){

    jQuery(document).on('translate.owl.carousel', function (e) {
        $('.owl-item video').each(function () {
            $(this).get(0).pause();
        });
    });
    jQuery(document).on('translated.owl.carousel', function (e) {
        if ($('.owl-item.active video').get(0)) {
            $('.owl-item.active video').get(0).play();
        }
    });
   
    $('.owl-item .item').each(function () {
         var attr = $(this).attr('data-videosrc');
         if (typeof attr !== typeof undefined && attr !== false) {
                console.log('hit');
                var videosrc = $(this).attr('data-videosrc');
                $(this).prepend('<video muted autopay loop><source src="' + videosrc + '" type="video/mp4"></video>');
            }
        });
        $('.owl-item.active video').attr('autoplay', true).attr('loop', true);   

});

Fonte: https://codepen.io/franchert/pen/xOrrqZ

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *