Как сменить одно фоновое видео на другое при наведении на ссылку/див?

Question

При наведении нужно, чтобы первое видео менялось на второе, а при отведении первое видео возвращалось.

Второе видео для эксперимента по ссылке: http://stupen.design/video-test/video/video2.mp4

.video-container {
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
	opacity: 100%;
	background-color: black;
}
.video {
	min-width: 100%; 
	min-height: 100%; 
	width: auto;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Video Test</title>
	<link rel="stylesheet" href="style.css">
	<script src="script.js"></script>
</head>
<body>
	<h1 class="video2"><a href="#">Ссылка на которую <br>нужно навести, <br>чтобы сменить <br>одно видео на другое</a></h1>
	<div class="video-container">
	    <video autoplay muted loop="true" class="video">
	   		<source src="http://stupen.design/video-test/video/video1.mp4" type="video/mp4">
	    </video>
	</div>
</body>
</html>

Answer 1

let change = document.querySelector('h1.video2');
let video = document.querySelector('.video-container video');

change.onmouseover = function() {
  video.src = "http://stupen.design/video-test/video/video2.mp4";
}

.video-container {
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
	opacity: 100%;
	background-color: black;
}
.video {
	min-width: 100%; 
	min-height: 100%; 
	width: auto;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Video Test</title>
	<link rel="stylesheet" href="style.css">
	<script src="script.js"></script>
</head>
<body>
	<h1 class="video2"><a href="#">Ссылка на которую <br>нужно навести, <br>чтобы сменить <br>одно видео на другое</a></h1>
	<div class="video-container">
	    <video autoplay muted loop="true" class="video" source src="http://stupen.design/video-test/video/video1.mp4" type="video/mp4">
	    </video>
	</div>
</body>
</html>

Answer 2

document.querySelector(".video2").addEventListener("mouseover", () => {
  document.querySelector(".js-video-1").pause();
  document.querySelector(".js-video-2").classList.remove("hidden");
  document.querySelector(".js-video-2").play();
});

.video-container {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  opacity: 100%;
  background-color: black;
}

.video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video.hidden {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Video Test</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1 class="video2"><a href="#">Ссылка на которую <br>нужно навести, <br>чтобы сменить <br>одно видео на другое</a></h1>
  <div class="video-container">
    <video autoplay muted loop="true" class="video js-video-1">
	   		<source src="http://stupen.design/video-test/video/video1.mp4" type="video/mp4">
	    </video>
    <video muted loop="true" class="video  js-video-2 hidden">
	   		<source src="http://stupen.design/video-test/video/video2.mp4" type="video/mp4">
	    </video>
  </div>
</body>

</html>

Answer 3

два блока с видео.

оба рядом. горизонтально или друг над другом.

оба в контейнере размером с блок видео и overflow:hidden

по умолчанию первый блок виден, а второй скрыт за краем. при наведении мыши на контейнер первый уходит за его пределы, второй заходит на его место. задается это стилями - отрицательные маргины или позиционирование.

бонус - можно сделать плавненько.

плюс - нахрен не нужны все эти jQuery и прочая нечисть, из-за которой каждый второй сайт тупит и жрет по гигу оперативы.

Answer 4

При наведении нужно, чтобы первое видео менялось на второе, а при отведении первое видео возвращалось.

currentTime - можно читать и писать

var video = document.createElement('video');
console.log(video.currentTime);

Answer 5

Спасибо всем за ответы. Я в итоге сделал следующим образом:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<a href="#"
onmouseover="document.getElementById('video2').style.display='block'; 
document.getElementById('video1').style.display='none';"
onmouseout="document.getElementById('video2').style.display='none';
document.getElementById('video1').style.display='block';"
>При наведении на ссылку одно видео сменится на другое</a>
	<div>
		<video id="video1" autoplay muted loop="true" style="display: block;">
			<source src="http://stupen.design/video-test/video/video1.mp4" type="video/mp4">
		</video>
		<video id="video2" autoplay muted loop="true" style="display: none;">
			<source src="http://stupen.design/video-test/video/video2.mp4" type="video/mp4">
		</video>
	</div>
</body>
</html>

БЛОГ НА HUSL

Как сменить одно фоновое видео на другое при наведении на ссылку/див?

Ответы (5 шт):