视频仅播放音频

时间:2019-06-24 20:57:43

标签: javascript html css sass

我需要播放2个视频,它们链接到图像上方的播放图标(预览)。单击它后,将带您到视频所在的部分。如果单击视频2 div 1,则隐藏并播放视频2,反之亦然,它们是2格之间切换并带有功能。问题是,当我单击视频2时,预览会按预期进行切换,但是当我单击“播放”时,视频会播放,但是图像在预览中冻结(它不会更改为视频,只播放声音)。我正在使用的代码是这样的:

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

那是我用来隐藏和在div之间切换的代码。

包含2个视频的页面就是这个:

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;
        }
    }
}

任何帮助/提示都将不胜感激,自星期五以来,我一直陷于困境。感谢您的宝贵时间。

0 个答案:

没有答案