0

he creado foreach que me da 5 videos, con sus iconos decorativos y demas.

<?php foreach ($preview as $previews): ?>
                <div class="column is-one-fifth">
                    <div class="video">
                        <a href="<?php echo $previews['volles-video']; ?>" data-video>
                            <video loop muted data-poster="<?php echo $previews['poster']; ?>">
                                <source src="<?php echo $previews['mp4']; ?>" type="video/mp4">
                                <source src="<?php echo $previews['kurzes-video']; ?>" type="video/webm">
                                Your browser does not support the video tag.
                            </video>

                            <div class="video-logo">
                                <img src="<?php echo $previews['icon']['sizes']['large']; ?>"
                                     alt="<?php echo $previews['icon']['alt']; ?>"/>
                            </div>
                            <div class="is-flex tag-icon">
                                <span>Video</span>
                                <object data="<?php echo get_template_directory_uri(); ?>/images/play-icon.svg"
                                        type="image/svg+xml"></object>
                            </div>
                        </a>
                    </div>
                    <?php if ($previews['icon']): ?>
                        <h3><?php echo $previews['title']; ?></h3>
                    <?php endif; ?>
                </div>
<?php endforeach; ?>

Luego he usado un codigo javascript para ejecutar un hovertoplay:

 var figure = $(".video").hover(hoverVideo, hideVideo);

function hoverVideo(e) {
    $('video', this).get(0).play();
    if (document.documentElement.clientWidth < 900) {
        $('video', this).get(0).pause();
    }
}

function hideVideo(e) {
    $('video', this).get(0).pause();

}

Y luego para que el video fuera clickable y visible, he creado una funcion en jquery que hace un lightbox basicamente. Intente usar , pero no es compatible con safari y da muchos problemas, asi que opte por hacerlo por mi cuenta.

$(document).ready(function () {
$('a[data-video]').each(function () {
    $(this).on('click', function (e) {
        e.preventDefault();

        $('body').append('<div id="video-lightbox">' +
            '<div>' +
            '<video controls>' +
            '<source src="' + $(this).attr('href') + '" type="video/mp4">' +
            'Ihr Browser unterstützt das gegebene Video-Format leider nicht.' +
            '</video>' +
            '<div id="close-video-lightbox">X</div>' +
            '</div>' +
            '</div>');

        $('#video-lightbox video').get(0).play();
        /*$('#video-lightbox > div').on('click', function(){
            $('#video-lightbox').hide().remove();
        });*/
        $('#close-video-lightbox').on('click', function () {
            $('#video-lightbox').hide().remove();
        });

        $(document).keydown(function(e) {
            // ESCAPE key pressed
            if (e.keyCode === 27) {
                $('#video-lightbox').hide().remove();
            }
        });
    });
})
});

Como veis, a travez de data.video genero el lightbox deseado para el video. El problema es que en todos los navegadores me sale los controls del video menos en chrome. La consola de navegador no da ningun tipo de error y el vcalidador de w3 tampoco. He probado varias cosas, como ponerle control al video principal o ponerle mute al video del lightbox y alguna cosillas mas sin importancia pero nada, no hay manera de que la barra de control aparezca en google chrome. Alguien sabe cual podria ser el problema? Gracias

2
  • He hecho una prueba y los controladores se ven en chrome... Commented el 30 abr. 2019 a las 16:46
  • Si, acabo de encontral el problema....no era para nada el codigo. Este web me llego hecha y alguien fue tan inteligente bloquear a las etiquetas video los controles por css.......:(. Gracias
    – Dario B.
    Commented el 2 may. 2019 a las 9:24

1 respuesta 1

0

Fallo encontrado y resuelto. Los controles estaban en display none desde el style.css.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.