0
私はビデオを再生している特定の時刻にdivを表示したり隠したりできるようにtimeUpdateとcurrentTimeを使いたいと思います。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