Форум

Saitama · #1 (**permalink**) 08.02.2019, 00:39

Здравствуйте, уважаемые специалисты по 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);

Скажите - как заставить видео - бесконечно двигаться по горизонтали, как картинку из первого скрипта ?
То есть чтобы видео было как фоновая картинка - левая сторона видео - граничила бы с правой стороной другого такого же видео.
Я не знаю как это сделать, возможно нужно несколько плееров как-то выстроить в один ряд и двигать их вправо.

Malleys · #2 (**permalink**) 08.02.2019, 11:06

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1,width=device-width">
</head>

<body>
	<style>
		#canvas-bg {
			position: fixed;
			pointer-events: none;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: black;
			z-index: -1;
		}
	</style>
	<script>
		
(function() {
	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");

	var video = document.createElement("video");
	video.autoplay = true;
	video.muted = true;
	video.loop = true;

	video.src = "https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4";

	video.oncanplay = function() {
		video.oncanplay = null;
		video.play();
		loop(0);
	};

	canvas.id = "canvas-bg";

	function loop(time) {
		var p = time % 30000 / 30000;
		var ρ = canvas.height / video.videoHeight;
		var videoWidth  = ρ * video.videoWidth;
		var videoHeight = ρ * video.videoHeight;
		var x = -p * videoWidth;

		context.clearRect(0, 0, canvas.width, canvas.height);

		while(x < canvas.width) {
			context.drawImage(video, x, 0, videoWidth, videoHeight);
			x += videoWidth;
		}

		requestAnimationFrame(loop);
	}

	function onresize() {
		canvas.width = innerWidth;
		canvas.height = innerHeight;
	};

	onresize();

	addEventListener("resize", onresize);

	document.documentElement.appendChild(canvas);
})();
	</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript