我需要播放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;
}
}
}
任何帮助/提示都将不胜感激,自星期五以来,我一直陷于困境。感谢您的宝贵时间。