Здравствуйте, уважаемые специалисты по JS
У меня есть два скрипта.
Первый скрипт двигает фоновую картинку - по горизонтали.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{
background-image:url('https://w-dog.ru/wallpapers/3/4/436036299520318/pole-doroga-pejzazh-leto.jpg');
}
</style>
<script language="JavaScript" type="text/javascript">
window.setInterval(function () {
if (!this.a || this.a < 0) this.a = 20000;
else this.a--;
document.body.style.backgroundPosition = this.a + "px 100%"
}, 50);
</script>
</head>
<body></body>
</html>
Второй скрипт - воспроизводит видео на всю страницу.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loop</title>
</head>
<body>
<video autoplay loop muted controls>
<source src="1.mp4">
</video>
<audio muted="muted">
</audio>
</body>
</html>
Вот этот код двигает видео вправо, но не бесконечно.
let x = 0
let v = document.querySelector("video")
let w = window.innerWidth
window.setInterval(function () {
if(x == w - v.offsetWidth - 10) x = 0
x++
v.style.marginLeft = x + "px"
}, 50);
Скажите - как заставить видео - бесконечно двигаться по горизонтали, как картинку из первого скрипта ?
То есть чтобы видео было как фоновая картинка - левая сторона видео - граничила бы с правой стороной другого такого же видео.
Я не знаю как это сделать, возможно нужно несколько плееров как-то выстроить в один ряд и двигать их вправо.