0
我想用timeUpdate和currentTime的是能夠顯示並在特定時間隱藏一個div當視頻播放。使用timeUpdate和currentTime的
我設法得到的東西的工作，但它似乎顯示和隱藏每一秒我希望它顯示。
我已附加下面的代碼...有我可以有它沒有它的顯示和隱藏每個第二中所示的任何方法嗎？
var video_one = document.getElementById('video_one'),
\t video_two = document.getElementById('video_two'),
\t video_one_wrapper = document.getElementById('video_one_wrapper'),
\t video_two_wrapper = document.getElementById('video_two_wrapper'),
\t play_button = document.getElementById('play_button');
\t // add event listener to play button
\t play_button.addEventListener('click', play_videos);
\t // run function on click
\t function play_videos() {
\t \t video_one.play();
\t \t video_two.play();
\t }
\t var switch_button = document.getElementById('switch_button');
\t switch_button.addEventListener('click', switch_videos);
\t function switch_videos() {
\t \t console.log('click');
\t \t if(video_one_wrapper.classList.contains('video_active')) {
\t \t \t console.log('it contains');
\t \t \t video_one_wrapper.classList.remove('video_active');
\t \t \t video_two_wrapper.classList.add('video_active');
\t \t } else if(video_two_wrapper.classList.contains('video_active')) {
\t \t \t video_two_wrapper.classList.remove('video_active');
\t \t \t video_one_wrapper.classList.add('video_active');
\t \t \t console.log('it doesnt')
\t \t }
\t }
\t video_one.addEventListener("timeupdate", message_one);
\t video_two.addEventListener("timeupdate", message_two);
\t var message_one = document.getElementById("message_one"),
\t \t message_two = document.getElementById("message_two");
\t function message_one() {
\t \t // if time between 10s and 20s
\t \t if(this.currentTime > 1 && this.currentTime < 20) {
\t \t \t if(message_one.classList.contains("message_hide")) {
\t \t \t \t message_one.classList.remove("message_hide");
\t \t \t } else {
\t \t \t \t message_one.classList.add("message_hide")
\t \t \t }
\t \t }
\t }
\t function message_two() {
\t \t // if time between 10s and 20s
\t \t if(this.currentTime > 1 && this.currentTime < 20) {
\t \t \t if(message_two.classList.contains("message_hide")) {
\t \t \t \t message_two.classList.remove("message_hide");
\t \t \t } else {
\t \t \t \t message_two.classList.add("message_hide")
\t \t \t }
\t \t }
\t }body {
\t margin: 0;
\t font-family: "Helvetica Neue";
\t font-size: 16px;
\t color: #FFF;
\t background-color: #242424;
}
.landing {
\t width: 100vw;
\t height: 100vh;
}
.landing_wrapper {
\t width: 100%;
\t height: 100%;
\t display: flex;
\t justify-content: center;
\t align-items: center;
}
.title_wrapper {
\t text-align: center;
}
.title_wrapper > h1 {
\t font-size: 46px;
\t text-transform: uppercase;
\t letter-spacing: 2px;
\t color: #FFF;
}
.title_wrapper > button {
\t background-color: #FFF;
\t border: none;
\t outline: none;
\t font-size: 16px;
\t text-transform: uppercase;
\t padding: 10px 20px;
}
video {
\t width: 100%;
\t z-index: 100;
}
.video {
\t position: relative;
\t width: 100vw;
\t height: 100vh;
}
.video_wrapper {
\t position: relative;
\t top:0;
\t left: 0;
\t width: 100%;
\t height: 100%;
}
.video_item {
\t position: absolute;
\t top: 0;
\t left: 0;
\t width: 100%;
\t height: 100%;
\t z-index: 99;
}
.switch_wrapper {
\t z-index: 100;
\t position: absolute;
\t top:0;
\t left: 0;
}
.video_element {
\t z-index: 100;
}
.message_wrapper {
\t position: absolute;
\t top: 0;
\t left: 0;
\t z-index: 200;
}
.message_hide {
\t display: none;
}
.video_one {
\t z-index: 0;
}
.video_two {
\t z-index: 0;
}
.video_active {
\t z-index: 10;
}
.video_three {
}<!doctype html>
<html lang="en">
<head>
\t <meta charset="utf-8">
\t <title>Title Here</title>
\t <meta name="description" content="The HTML5 Herald">
\t <meta name="author" content="SitePoint">
\t <link rel="stylesheet" href="main.css">
</head>
<body>
\t <div class="landing">
\t \t <div class="landing_wrapper">
\t \t \t <div class="title">
\t \t \t \t <div class="title_wrapper">
\t \t <h1>Title Here</h1>
\t \t <button id="play_button">Start</button>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="video">
\t <div class="switch_wrapper"><button id="switch_button">Switch</button></div>
\t \t <div class="video_wrapper">
\t \t \t <div id="video_one_wrapper" class="video_item video_active">
\t \t \t \t <div id="message_one" class="message_wrapper message_hide"><h1>Hello Video 1</h1></div>
\t \t \t \t <video id="video_one" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/girl_1_zps8ud1zuxh.mp4" loop >
\t \t \t </div>
\t \t \t <div id="video_two_wrapper" class="video_item">
\t \t \t \t <div id="message_two" class="message_wrapper message_hide"><h1>Hello Video 2</h1></div>
\t \t \t \t <video id="video_two" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/boy_zpsugnp76od.mp4" muted loop>
\t \t \t </div>
\t \t </div>
\t </div>
<script src="js.js"></script>
</body>
</html>
謝謝。這個解決方案完美運作 – norrisollie
不客氣。 – ToujouAya