i made a vid only page
https://toddheymandirector.com/tablet/index_movietest_vidonly.html
I've testing the code below out on a couple of web-servers I have access to and there are no major issues. All videos/text load as expected.
On Chrome browser I didnt see the slight delayed start of the videos, it worked smoothly BUT on Safari desktop and Chrome mobile there was a slight delay before the videos started, not much, but a slight lag, so now I've actually included an overlay above the video to try and mask this. For me it seems to be working. I can no longer see the delay in Safari destop or on Chrome mobile.
I've used your set of _m.mp4 videos to test.
What I suggest is take the code as it is and upload it as a test page to your server and see how your server responds. If it works then DONT alter any of the timings. You can alter the type-face/color/spacing of course but don't start adding any weird css like 'animation delay' to the css, which I saw in your last version.
Once/if it works in a stand alone page then transfer the code to your main page but check as you go along to make sure there are no code conflicts.
If the test page doesnt work on your server I have no more suggestions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Full Page Video Content</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Source Serif Pro', serif;
}
.videoShowcase {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
overflow: hidden;
}
.videoContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000;
}
.videoContainer::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background-color: rgba(0, 0, 0, 0.3);
}
.videoContainer video {
min-width: 100%;
min-height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease-in-out;
opacity: 0;
}
.videoText {
z-index: 10;
transform: translateY(200px);
transition: all 700ms ease-in-out;
opacity: 0;
}
.videoText h2 {
margin: 0 0 10px 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 45px;
line-height: 45px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
}
.videoText h4 {
margin: 0 0 15px 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 25px;
line-height: 25px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
}
.videoText h5 {
margin: 0;
padding: 0;
color: #fff;
font-size: 16px;
line-height: 16px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.slideUp {
transform: translateY(0);
}
.fullOpacity {
opacity: 1!important;
}
.videoOverlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 9;
transition: all 700ms ease-in-out;
}
.opacityZero {
opacity: 0;
}
</style>
</head>
<body>
<section class="videoShowcase">
<div class="videoOverlay"></div>
<div class="videoContainer">
<video class="video" src="movies/ocean4.mp4" autoplay muted></video>
</div>
<div class="videoText">
<h2>Todd Heyman</h2>
<h4>Film Director</h4>
</div>
</section>
<script>
const videoText = document.querySelector('.videoText');
const video = document.querySelector('.video');
const videoOverlay = document.querySelector('.videoOverlay');
const videos = [
{name: 'ocean4.mp4' , title: 'Todd Heyman' , director: 'Film Director' , agency: ''},
{name: 'nike_getaway_m.mp4' , title: 'Nike' , director: 'The Getaway' , agency: 'Agency • Wieden & Kennedy'},
{name: 'redcross_m.mp4' , title: 'Red Cross' , director: 'Jumper' , agency: 'Agency • Ogilvy NY'},
{name: 'bartenura_m.mp4' , title: 'Bartenura' , director: 'The Text' , agency: 'Agency • DDB Paris'}
];
// Default when page loads
setTimeout(function() {
videoText.classList.add('slideUp' , 'fullOpacity');
setTimeout(function(){
video.classList.add('fullOpacity');
videoOverlay.classList.add('opacityZero');
}, 100);
}, 200);
let count = 0;
// Change content after 6 seconds
setInterval(function() {
video.classList.remove('fullOpacity');
videoText.classList.remove('fullOpacity');
videoOverlay.classList.remove('opacityZero');
setTimeout(function(){
videoText.classList.remove('slideUp');
}, 500);
count === videos.length - 1 ? count = 0 : count++;
setTimeout(function(){
videoText.classList.add('slideUp' , 'fullOpacity');
videoText.innerHTML = `
<h2>${videos[count].title}</h2>
<h4>${videos[count].director}</h4>
<h5>${videos[count].agency}</h5>
`;
video.src=`movies/${videos[count].name}`;
}, 1000);
setTimeout(function(){
videoOverlay.classList.add('opacityZero');
}, 1500);
setTimeout(function(){
video.classList.add('fullOpacity');
}, 1000);
}, 6000)
</script>
</body>
</html>
AdChoices