Подскажите пожалуйста, как можно сделать плавную смену видео через JS. Есть массив с ссылками на видео, и я каждые 15 минут меняю атрибут src на рандомный из массива. Видео меняется очень резко, как сделать что бы оно менялась с плавной анимацией?
<!-- HTML -->
<video autoplay muted id="video">
</video>
// JavaScript
function viewRandomVideo() {
var vids = ["video1.mp4",
"video2.mp4",
"video3.mp4"
];
var randomVideo = vids[Math.floor(Math.random()*vids.length)];
var videoElement = document.getElementById("video");
videoElement.src = randomVideo;
};
setInterval(viewRandomVideo, 900000); // = 15 минут
Видео довольно большие, больше 15 минут, поэтому загружать их все сразу и поочередно менять opacity нельзя.