Динамическое полноэкранное фоновое видео - PullRequest
Новая
       10

Динамическое полноэкранное фоновое видео

0 голосов
/ 03 ноября 2018

У меня есть 2 полноэкранных фоновых видео, которые я хочу динамически менять в зависимости от времени суток (например, циклическое дневное видео с 6:00 до 19:00 и циклическое ночное видео с 7:00 до 6:00). В настоящее время я комментирую видео, которое не хочу воспроизводить. Любые советы о том, как сделать это с JS, будут очень благодарны. (Видео находится в папке «видео»).

HTML: 

<div class="video_contain">
            <!-- video day -->
            <video autoplay loop id="video-background" muted plays-inline>
                <source src="video/catbeats-loop-day-720p.m4v" poster="img/catbeats-day.gif" type="video/mp4">
            </video>

            <!-- video night -->
            <!-- <video autoplay loop id="video-background" muted plays-inline>
                <source src="video/catbeats-loop-night-720p.m4v" poster="img/catbeats-night.gif" type="video/mp4">
            </video> -->
</div>

CSS: 

.video_contain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;
}

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

1 Ответ

0 голосов
/ 03 ноября 2018

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

изменение источника в теге html5-видео

Не стесняйтесь исправлять и улучшать этот код. 

var currentTime = new Date().getHours();
var video = document.getElementById('video-background');
var source = document.createElement('source');

if (6 <= currentTime && currentTime < 7) {
source.setAttribute('src', 'https://storage.googleapis.com/coverr-main/mp4/The-Slow-Dock.mp4');
video.appendChild(source);
video.play();
}
else {
    source.setAttribute('src', 'https://storage.googleapis.com/coverr-main/mp4/Night-Traffic.mp4');
video.appendChild(source);
video.play();
}
.video_contain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;
}

#video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto;
}
<div class="video_contain">
            <video autoplay loop id="video-background" muted plays-inline></video>
</div>
...