Question

我想使用timeUpdate和currentTime在视频播放的某个时间显示和隐藏div。

我已经成功地完成了某些工作，但它似乎在每一秒我都希望它展示和隐藏。

我已经附上了下面的代码...有没有什么方法可以让它显示而不显示和隐藏每一秒？

＆＃13;

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")
			}
		}
	}

＆＃13;

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 {
}

＆＃13;

<!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>

＆＃13;

Answer 1

当音频/视频的播放位置发生变化时，会发生timeupdate事件。例。播放视频时当视频播放时，此功能shoppingList$始终在每次（第二）调用。我会给你举个例子

ShoppingCart s
message_one函数名为
currentTime = 1元素不包含类＆＃34; message_hide＆＃34;
message_one元素添加类＆＃34; message_hide＆＃34;
message_one增加到2s
message_one函数名为
currentTime元素现在包含类＆＃34; message_hide＆＃34; 。
message_one这会打电话。它使消息隐藏

再次当currentTime更新它会改变时，它会使消息显示隐藏循环

您目前的职能

message_one

我建议一种解决方法

message_one.classList.add("message_hide")

使用timeUpdate和currentTime

1 个答案: