У меня есть 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;
}
}
}
Любая помощь / совет очень ценится, я застрял с пятницы на этом.Спасибо за ваше время, ребята.