#javascript #html #dom #audio #video
Вопрос:
У меня есть веб-сайт, состоящий из нескольких разделов, в каждом из которых есть видео и аудио. Видео отключается, зацикливается и воспроизводится автоматически, а аудио должно начинаться только при нажатии небольшой кнопки воспроизведения/паузы. Но когда я воспроизводю аудио и видео следующего раздела попадает в окно просмотра, звук прекращается. «Аудиопроигрыватель» просто отлично работает, когда я скрываю видео с помощью дисплея:нет. Смотрите здесь: https://www.glyk-musik.de/alternity
Как я могу предотвратить остановку звука, когда на экран выводится видео?
function playPause(element){
var audio = document.getElementById(element);
var video = document.getElementById('video-' document.getElementById(element).id);
var button = document.getElementById('btn-' document.getElementById(element).id);
if (audio.paused) {
audio.play();
button.classList.toggle('playing');
}
else {
audio.pause();
button.classList.toggle('playing');
}
};
var audios = document.getElementsByTagName('audio');
var buttons = document.getElementsByClassName('audiobutton');
var sections = document.getElementsByClassName('fullscreen');
document.addEventListener('ended', function(element) {
for(var i = 0, len = audios.length; i < len; i ) {
if(audios[i] == element.target) {
audios[i 1].play();
buttons[i].classList.toggle('playing');
buttons[i 1].classList.toggle('playing');
console.log(sections[i 2].id);
window.location = '#' sections[i 2].id;
}
}
}, true);
document.addEventListener('play', function(element) {
element.innerHTML = '<span class="material-icons">pause</span>';
for(var i = 0, len = audios.length; i < len; i ) {
if(audios[i] != element.target){
audios[i].pause();
buttons[i].classList.remove('playing');
}
else{
buttons[i].innerHTML = '<span class="material-icons">pause</span>';
}
}
}, true);
document.addEventListener('pause', function(element) {
for(var i = 0, len = audios.length; i < len; i ) {
if(audios[i] = element.target){
buttons[i].innerHTML = '<span class="material-icons">play_arrow</span>';
}
}
}, true); body {
font-size: 1rem;
padding: 0;
margin: 0;
}
.fullscreen-wrapper {
height: 120vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.fullscreen {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.content-wrapper {
width: 100%;
text-align: center;
}
#alternity-wrapper {
background-color: hsl(32, 20%, 86%);
height: 100vh;
margin-bottom: -25vh;
}
#alternity img {
mix-blend-mode: screen;
opacity: 0.8;
width: 300px;
height: auto;
}
#hand-wrapper {
background-color: hsl(32, 20%, 86%);
}
#atrics-wrapper {
background-color: hsl(0, 20%, 8%);
}
#manrei-wrapper {
background-color: hsl(230, 12%, 10%);
}
#maryyalex-wrapper {
background-color: hsl(14, 20%, 88%);
}
#philippweiss-wrapper {
background-color: hsl(261, 18%, 88%);
}
#nansen-wrapper {
background-color: hsl(0, 0%, 12%);
}
#katherinetrimble-wrapper {
background-color: hsl(320deg 6% 80%);
}
#video-audio-7 {
width: 960px;
height: 540px;
}
#glyk-wrapper {
background-color: hsl(320deg 6% 80%);
height: 100vh;
}
#glyk img {
opacity: 0.8;
width: 180px;
height: auto;
}
.tracktitle {
margin: 3rem 0 0 0;
color: white;
opacity: 0.1;
mix-blend-mode: difference;
font-size: 1.25rem;
letter-spacing: 0.05rem;
text-transform: uppercase;
}
.audiobutton {
color: white;
opacity: 0.1;
mix-blend-mode: difference;
cursor: pointer;
font-size: 1.5rem;
width: 3rem;
height: 3rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.audiobutton span {
font-size: 2rem;
}
.audio-wrapper {
position: fixed;
top: 0;
left: 0;
} <div class="audio-wrapper">
<audio id="audio-1" class="audioplayer">
<source src="https://www.glyk-musik.de/audio/hand.mp3" type="audio/mp3">
</audio>
<audio id="audio-2" class="audioplayer">
<source src="https://www.glyk-musik.de/audio/a-trics.mp3" type="audio/mp3">
</audio>
<audio id="audio-3" class="audioplayer">
<source src="https://www.glyk-musik.de/audio/man-rei.mp3" type="audio/mp3">
</audio>
<audio id="audio-4" class="audioplayer">
<source src="https://www.glyk-musik.de/audio/mary-yalex.mp3" type="audio/mp3">
</audio>
<audio id="audio-5" class="audioplayer">
<source src="https://www.glyk-musik.de/audio/philipp-weiss.mp3" type="audio/mp3">
</audio>
<audio id="audio-6" class="audioplayer">
<source src="https://www.glyk-musik.de/audio/nansen.mp3" type="audio/mp3">
</audio>
<audio id="audio-7" class="audioplayer">
<source src="https://www.glyk-musik.de/audio/katherine-trimble.mp3" type="audio/mp3">
</audio>
</div>
<section id="hand-wrapper" class="fullscreen-wrapper">
<div id="hand" class="fullscreen">
<div class="content-wrapper">
<video muted autoplay loop playsinline id="video-audio-1">
<source src="https://www.glyk-musik.de/videos/hand-videoloop.mp4" type="video/mp4">
</video>
<p class="tracktitle">HAND - GLK</p>
<div id="btn-audio-1" class="audiobutton" onclick="playPause('audio-1')"><span class="material-icons">play_arrow</span></div>
</div>
</div>
</section>
<section id="atrics-wrapper" class="fullscreen-wrapper">
<div id="atrics" class="fullscreen">
<div class="content-wrapper">
<video muted autoplay loop playsinline id="video-audio-2">
<source src="https://www.glyk-musik.de/videos/atrics-videoloop.webm" type="video/webm">
</video>
<p class="tracktitle">The A-Trics - Past and present</p>
<div id="btn-audio-2" class="audiobutton" onclick="playPause('audio-2')"><span class="material-icons">play_arrow</span></div>
</div>
</div>
</section>
<section id="manrei-wrapper" class="fullscreen-wrapper">
<div id="manrei" class="fullscreen">
<div class="content-wrapper">
<video muted autoplay loop playsinline id="video-audio-3">
<source src="https://www.glyk-musik.de/videos/manrei-videoloop.mp4" type="video/mp4">
</video>
<p class="tracktitle">Man Rei - Towards Preungesheim</p>
<div id="btn-audio-3" class="audiobutton" onclick="playPause('audio-3')"><span class="material-icons">play_arrow</span></div>
</div>
</div>
</section>
<section id="maryyalex-wrapper" class="fullscreen-wrapper">
<div id="maryyalex" class="fullscreen">
<div class="content-wrapper">
<video muted autoplay loop playsinline id="video-audio-4">
<source src="https://www.glyk-musik.de/videos/maryyalex-videoloop.mp4" type="video/mp4">
</video>
<p class="tracktitle">Mary Yalex - Sunday Morning Jam</p>
<div id="btn-audio-4" class="audiobutton" onclick="playPause('audio-4')"><span class="material-icons">play_arrow</span></div>
</div>
</div>
</section>
<section id="philippweiss-wrapper" class="fullscreen-wrapper">
<div id="philippweiss" class="fullscreen">
<div class="content-wrapper">
<video muted autoplay loop playsinline id="video-audio-5">
<source src="https://www.glyk-musik.de/videos/philippweiss-videoloop.mp4" type="video/mp4">
</video>
<p class="tracktitle">Philipp Weiss - Rodenbach</p>
<div id="btn-audio-5" class="audiobutton" onclick="playPause('audio-5')"><span class="material-icons">play_arrow</span></div>
</div>
</div>
</section>
<section id="nansen-wrapper" class="fullscreen-wrapper">
<div id="nansen" class="fullscreen">
<div class="content-wrapper">
<video muted autoplay loop playsinline id="video-audio-6">
<source src="https://www.glyk-musik.de/videos/nansen-videoloop.mp4" type="video/mp4">
</video>
<p class="tracktitle">Nansen - Three years later</p>
<div id="btn-audio-6" class="audiobutton" onclick="playPause('audio-6')"><span class="material-icons">play_arrow</span></div>
</div>
</div>
</section>
<section id="katherinetrimble-wrapper" class="fullscreen-wrapper">
<div id="katherinetrimble" class="fullscreen">
<div class="content-wrapper">
<video muted autoplay loop playsinline id="video-audio-7">
<source src="https://www.glyk-musik.de/videos/katherinetrimble-videoloop.webm" type="video/webm">
</video>
<p class="tracktitle">Katherine Trimble - Induction</p>
<div id="btn-audio-7" class="audiobutton" onclick="playPause('audio-7')"><span class="material-icons">play_arrow</span></div>
</div>
</div>
</section>
<section id="glyk-wrapper" class="fullscreen-wrapper">
<div id="glyk" class="fullscreen">
<div class="content-wrapper">
</div>
</div>
</section>