I am looking to utilize the timeUpdate and currentTime functionalities to display or hide a div at a specific time during video playback.
I have been able to make it work, but it seems to be showing and hiding every second I specify.
Below is the code I have attached... is there a way to make it display without the constant showing and hiding?
var video_one = document.getElementById('video_one'),
video_two = document.getElementById('video_two'),
video_one_wrapper = document.getElementById('video_one_wrapper'),
video_two_wrapper = document.getElementById('video_two_wrapper'),
play_button = document.getElementById('play_button');
// add event listener to play button
play_button.addEventListener('click', play_videos);
// run function on click
function play_videos() {
video_one.play();
video_two.play();
}
var switch_button = document.getElementById('switch_button');
switch_button.addEventListener('click', switch_videos);
function switch_videos() {
console.log('click');
if(video_one_wrapper.classList.contains('video_active')) {
console.log('it contains');
video_one_wrapper.classList.remove('video_active');
video_two_wrapper.classList.add('video_active');
} else if(video_two_wrapper.classList.contains('video_active')) {
video_two_wrapper.classList.remove('video_active');
video_one_wrapper.classList.add('video_active');
console.log('it doesnt')
}
}
video_one.addEventListener("timeupdate", message_one);
video_two.addEventListener("timeupdate", message_two);
var message_one = document.getElementById("message_one"),
message_two = document.getElementById("message_two");
function message_one() {
// if time between 10s and 20s
if(this.currentTime > 1 && this.currentTime < 20) {
if(message_one.classList.contains("message_hide")) {
message_one.classList.remove("message_hide");
} else {
message_one.classList.add("message_hide")
}
}
}
function message_two() {
// if time between 10s and 20s
if(this.currentTime > 1 && this.currentTime < 20) {
if(message_two.classList.contains("message_hide")) {
message_two.classList.remove("message_hide");
} else {
message_two.classList.add("message_hide")
}
}
}body {
margin: 0;
font-family: "Helvetica Neue";
font-size: 16px;
color: #FFF;
background-color: #242424;
}
.landing {
width: 100vw;
height: 100vh;
}
.landing_wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.title_wrapper {
text-align: center;
}
.title_wrapper > h1 {
font-size: 46px;
text-transform: uppercase;
letter-spacing: 2px;
color: #FFF;
}
.title_wrapper > button {
background-color: #FFF;
border: none;
outline: none;
font-size: 16px;
text-transform: uppercase;
padding: 10px 20px;
}
video {
width: 100%;
z-index: 100;
}
.video {
position: relative;
width: 100vw;
height: 100vh;
}
.video_wrapper {
position: relative;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.video_item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.switch_wrapper {
z-index: 100;
position: absolute;
top:0;
left: 0;
}
.video_element {
z-index: 100;
}
.message_wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 200;
}
.message_hide {
display: none;
}
.video_one {
z-index: 0;
}
.video_two {
z-index: 0;
}
.video_active {
z-index: 10;
}
.video_three {
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="landing">
<div class="landing_wrapper">
<div class="title">
<div class="title_wrapper">
<h1>Title Here</h1>
<button id="play_button">Start</button>
</div>
</div>
</div>
</div>
<div class="video">
<div class="switch_wrapper"><button id="switch_button">Switch</button></div>
<div class="video_wrapper">
<div id="video_one_wrapper" class="video_item video_active">
<div id="message_one" class="message_wrapper message_hide"><h1>Hello Video 1</h1></div>
<video id="video_one" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/girl_1_zps8ud1zuxh.mp4" loop >
</div>
<div id="video_two_wrapper" class="video_item">
<div id="message_two" class="message_wrapper message_hide"><h1>Hello Video 2</h1></div>
<video id="video_two" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/boy_zpsugnp76od.mp4" muted loop>
</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>