Как при прокрутке страницы убавлять звук у видео на фоне?

Question

[AnonymousBusinessman]

Здравствуйте. Вопрос по поводу видеофона для сайта.
Есть Landing-Page, в котором на 1-м главном холсте на фоне проигрывается видео со звуком.
Как сделать так, чтобы при прокрутке страницы (Например прокрутка на 2-й или 3-й холст) звук плавно отключался, а при прокрутке обратно к 1-му холсту он плавно включался.

Вот код для справки и для тех, кому нужно видео на фон:

<div id="trailer" class="is_overlay">
			<video id="video" width="100%" height="auto"  autoplay="autoplay" loop="loop" preload="auto" muted>
				<source src="video/backgroundCanvasOneQ.mp4">
			</video>
		</div>

.is_overlay{ display: block; width: 100%; height: 100%; }
			
			body {
				background-color: black;
			}
			#trailer {
				position: fixed;
				top: 0; right: 0; bottom: 0; left: 0;
				overflow: hidden;
			}
			#trailer > video {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			/* 1. No object-fit support: */
			@media (min-aspect-ratio: 16/9) {
				#trailer > video { height: 300%; top: -100%; }
			}
			@media (max-aspect-ratio: 16/9) {
				#trailer > video { width: 300%; left: -100%; }
			}
			/* 2. If supporting object-fit, overriding (1): */
			@supports (object-fit: cover) {
				#trailer > video {
					top: 0; left: 0;
					width: 100%; height: 100%;
					object-fit: cover;
				}
			}

Код JS - Много чего лишнего, не исправлял пока что ничего.

var Preloader = function (element) {				
				var video =  document.getElementById(element),
					preloader = document.getElementById('preloader'),
					enter = document.getElementById('enter');
				var ua = detect.parse(navigator.userAgent);
				if ( ua.os.family === 'Android' ) {
					video.setAttribute( 'controls','controls' );
				}
				
				var api = {};
				api._removePreloader = function() {
					preloader.style.opacity = 0;
					enter.style.opacity = 1;
				};
				api.startCheckingLoading = function() {
					video.addEventListener('click',function(){
					  video.play();
					},false);
					video.addEventListener( 'play', api._removePreloader() );			
				};
				return api;			   			   
			}
			
			window.addEventListener('load', function() {
				var preloader = Preloader('video');
				preloader.startCheckingLoading();
				
			});

Answer 1

[Олег Яценко]

document.onscroll=function(){
var s=document.body.scrollTop;
var max=600;//при скроле на 600px громкость = 0
var vol=-1*((s-max)/max);//громкость
vol=(vol>=0)?vol:0;
console.log(s,vol)
}

Comments

[AnonymousBusinessman]

Вроде я что-то делаю не так, но скрипт не работает.
Уже вставлял его и в head, и перед закрывающимся тегом body - всё-равно не работает.

[AnonymousBusinessman]

AnonymousBusinessman: muted у видео я убрал.

[Олег Яценко]

AnonymousBusinessman: Вместо console.log(s,vol) напиши video.volume = vol; Сам скрипт добавь в ф-ю Preloader

[Олег Яценко]

Обязательно после того, как объявил переменную video, к примеру перед строкой var api = {};

[AnonymousBusinessman]

Олег Яценко: Огромное Вам спасибо. Скрипт работает!