Хотелось с помощью js по нажатии на кнопку плавно менять видео в плеере.
Написал такой простой скрипт. Проблема однако в том, что при выполнении события load плеер исчезает и появляется. Можно ли это как-то исправить?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video_bg</title>
</head>
<body>
<h1>video bg</h1>
<main>
<h2>Работаем с видео</h2>
<button id="btn1">Гроза 1</button>
<button id="btn2">Гроза 2</button>
<video id="video" width="700" height="700" muted loop cover="cover.png">
<source src="video/default.mp4" type="video/mp4">
</video>
</main>
<script>
let videoPath = ['default.mp4', 'storm1.mp4', 'storm2.mp4']
const videoNode = document.getElementById('video');
const sourceTag = videoNode.firstElementChild;
const btn1Node = document.getElementById('btn1');
const btn2Node = document.getElementById('btn2');
videoNode.play();
btn1Node.addEventListener('click', e => {
e.preventDefault();
startStorm(1);
});
btn2Node.addEventListener('click', e => {
e.preventDefault();
startStorm(2);
})
function startStorm(videoIndex) {
videoNode.pause();
sourceTag.setAttribute('src', `video/${videoPath[videoIndex]}`);
videoNode.load();
videoNode.play();
}
</script>
</body>
</html>
Простой
