代码之家 › 专栏 › 技术社区 › jorscobry

动态全屏背景视频

background dynamic video web javascript

jorscobry · 技术社区 · 7 年前

我有2个全屏背景视频,我想根据一天中的时间动态更改(例如,从早上6点到晚上7点循环播放白天视频,而从晚上7点到早上6点循环播放夜间视频)。目前,我正在评论我不想播放的视频。任何关于如何使用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 回复 | 直到 7 年前

Imad El Haj 7 年前

试着用js创建src元素,这取决于一天中的时间,然后把它附加到你的视频元素中,答案来自这篇文章。

changing source on html5 video tag

请随意更正和改进此代码。

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>

推荐文章

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

Loopy Momy · 当我尝试制作动画时,CSS可见性和块不起作用

2 年前

Ebrahim Momin · div第一次向下滑动它包含的子元素时,首先出现JQuery

2 年前

dds · Bootstrap下拉菜单导航栏

2 年前

TUTORIAL Boss -Channel · 我是网络编程的新手,我有以下问题需要解释[关闭]

2 年前

big boi · 如何使php标记可以在js脚本和php代码中运行?复制

2 年前

ShashidharM · React Redirect在本地工作,但在Vercel上为404

2 年前

Clément Maurice · 在php中更新我的网站上的颜色时出现问题

2 年前

IITU Yernur · Angular 18中不显示图像

2 年前

ahmed ahmedx · 如何正确居中放置卡片

2 年前