javascript - 使用 timeUpdate 和 currentTime

标签 javascript html css

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

我已经设法让一些东西正常工作,但它似乎在我希望它显示的每一秒都显示和隐藏。

我附上了下面的代码...有什么方法可以让它显示而无需每秒显示和隐藏吗?

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>

最佳答案

timeupdate 事件在音频/视频的播放位置发生变化时发生。 例子。播放视频时。此函数 message_one 总是在播放视频时每次(秒)调用。我会给你示例步骤

  1. currentTime = 1
  2. message_one 调用的函数
  3. message_one 元素不包含类“message_hide”
  4. message_one 元素添加类“message_hide”
  5. currentTime 增加到 2s
  6. message_one 调用的函数
  7. message_one 元素现在包含类“message_hide”。
  8. message_one.classList.add("message_hide") 这将调用。它使消息隐藏

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

你当前的功能

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

我建议一种解决方法

if (this.currentTime > 0 && this.currentTime < 20) {
    message_two.classList.remove("message_hide");
 }
 else {
    message_two.classList.add("message_hide")
 }

关于javascript - 使用 timeUpdate 和 currentTime,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43606251/

相关文章:

javascript - 清除后 Highstock 图表不显示

c# - 将对象从网络服务器传递到客户端

c# - 在 asp.net 中捕获 href 事件

javascript - 隐藏嵌套的 html 表格列

html - 重叠 "Zoom"div 阻塞文本和选项选择

css - @font-face 在 Mac 上看起来很模糊

javascript - 如何在另一个html中调用函数

html - 颜色和文本装饰在外部 CSS 表中不起作用。

jquery - CSS 选项卡菜单问题

css - 样式化 HTML5 数字输入