Видео воспроизводит только аудио - PullRequest
1 голос
/ 24 июня 2019

У меня есть 2 видео, которые мне нужно воспроизвести, они связаны со значком воспроизведения над изображением (предварительный просмотр).После того, как вы щелкнете по нему, вы попадете в раздел, где находится видео. Это 2 деления, которые переключаются между функциями, если щелкнуть видео 2, то разделение 1 скрывает и воспроизводит видео 2 и наоборот.Дело в том, что когда я нажимаю видео 2, предварительный просмотр переключается, как и предполагалось, но когда я нажимаю кнопку воспроизведения, воспроизводится видео, но изображение останавливается при предварительном просмотре (оно не меняется на видео, просто воспроизводится звук).Код, который я использую, таков:

function switch_div(show) {  
document.getElementById("show_"+show).style.display = "block";
document.getElementById("show_"+((show==1)?2:1)).style.display = "none";
} 

Это код, который я использую, чтобы скрывать и переключаться между div.

Вот страница с двумя видео:

section.section.home-video#show_1
            .max-container-xxxl
                .container-video
                    .video#content-video
                        video#video(width='100%', height='100%', poster='./assets/images/thumb-fito-espinoza.jpg')
                            // source(src='./assets/videos/OTTO-KUNZ.mp4', type='video/mp4')
                            source(src='http://agencia-intranet.ddns.net/video/OTTO-KUNZ.mp4', type='video/mp4')
                        label.preview-controls#preview_controls(for="play-pause")
                            i.fa.fa-play.active#preview_play
                            i.fa.fa-pause#preview_pause
                        #video-controls
                            .barra#barra
                                progress.progress#progress-bar(min='0', max='100', value='0')

                            button#play-pause(type='button')
                                img(src='./assets/images/ico-play.png', alt='Play')
                            button#mute(type='button')
                                img(src='./assets/images/ico-volumen-no.png', alt='Muted')
                            input#volume-bar(type='range', min='0', max='1', step='0.1', value='1')
                            button#full-screen(type='button') Full-Screen

        section.section.home-video.hide#show_2
                    .max-container-xxxl
                        .container-video
                            .video#content-video
                                video#video(width='100%', height='100%', poster='./assets/images/bg-andrea-llosa.jpg')
                                    source(src='http://agencia-intranet.ddns.net/video/OTTO-KUNZ.mp4', type='video/mp4')
                                label.preview-controls#preview_controls(for="play-pause")
                                    i.fa.fa-play.active#preview_play
                                    i.fa.fa-pause#preview_pause
                                #video-controls
                                    .barra#barra
                                        progress.progress#progress-bar(min='0', max='100', value='0')

                                    button#play-pause(type='button')
                                        img(src='./assets/images/ico-play.png', alt='Play')
                                    button#mute(type='button')
                                        img(src='./assets/images/ico-volumen-no.png', alt='Muted')
                                    input#volume-bar(type='range', min='0', max='1', step='0.1', value='1')
                                    button#full-screen(type='button') Full-Screen

И стили:

.home{

&-welcome{
// border-bottom: 12px solid #030302;
    @include to-sm(){
    margin-top: 5rem;
    min-height: calc(100vh - 5rem);
    }
}

&-expertos{
    // border-bottom: 12px solid #030302;
}

&-video{
    padding-top: 0;
    padding-bottom: 0;

    .container-video{
        max-width: 1240px;
        background-color: #000;
        // max-height: calc(100vh - 12rem);
        margin-left: auto;
        margin-right: auto;

        .video{
            position: relative;
            transition: all .3s;
            opacity: .8;
            // max-height: calc(100vh - 6rem);

            .preview-controls{
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: .5;
                transition: all .3s;
                width: 100%;
                height: 100%;
                z-index: 9;
                cursor: pointer;

                .fa{
                    @extend .color9;
                    font-size: 6rem;
                    display: inline-block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    transition: all .2s;

                    &.active{
                        opacity: 1;
                    }
                }
            }


            &.in-play{
                // display: none;
                background-color: transparent;
                opacity: 1;

                .preview-controls{
                    opacity: 0;
                }
            }
        }


        @media screen and (max-width: 1280px) and (max-height: 600px){
            max-width: 992px;
        }

        @media screen and (max-width: 1280px) and (max-height: 550px){
            max-width: 850px;
        }
    }
}

Любая помощь / совет очень ценится, я застрял с пятницы на этом.Спасибо за ваше время, ребята.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...