こんにちは!
前回、LPの案件で質問させてもらったものです。
ここでの答えを参考に作ってはみたのですが、なぜかリンクの文字だけ表示されません。
どこが変なのでしょうか。
今作ってる途中のURLを貼るので、具体的に教えてもらうと助かります。
http://devserver-room8.cloudapp.net/movie/
他の知り合いに聞いたらsetintervalとdisplay: noneを使うと言われたのですがどちらがいいのかわかりません。
HTML
1<!--ムービー--> 2<div id="container" class="main980"> 3 <div id="movie1"> 4 <video id="video1" autoplay class="video"> 5 <source src="img/sample.mp4"> 6 </video> 7 <div id="play1" class="play"> 8 <ul> 9 <li> 10 <a href="https://www.youtube.com/" target="_blank">You Tube</a> 11 <!-- 次の動画を再生ボタン --> 12 <button id="next1"><a href="#video2">次の動画を再生</a></button> 13 </li> 14 </ul> 15 </div> 16 </div> 17 <div class="img"> 18 <img src="img/menu-btn01.png" alt="リノベーションだったら"> 19 </div> 20 <div id="movie2"> 21 <video id="video2" class="video"> 22 <source src="img/sample.mp4"> 23 </video> 24 <div id="play2" class="play"> 25 <ul> 26 <li> 27 <a href="https://www.youtube.com/" target="_blank">You Tube</a> 28 <!-- 次の動画を再生ボタン --> 29 <button id="next1"><a href="#video3">次の動画を再生</a></button> 30 </li> 31 </ul> 32 </div> 33 </div> 34 <div class="img"> 35 <img src="img/menu-btn02.png" alt="もっと詳しく知りたい人の為に"> 36 </div> 37 <div id="movie3"> 38 <video id="video3" class="video"> 39 <source src="img/sample.mp4"> 40 </video> 41 <div id="play3" class="play"> 42 <ul> 43 <li> 44 <a href="https://www.youtube.com/" target="_blank">You Tube</a> 45 <!-- 次の動画を再生ボタン --> 46 <button id="next1"><a href="#video4">次の動画を再生</a></button> 47 </li> 48 </ul> 49 </div> 50 </div> 51 <div class="img"> 52 <img src="img/menu-btn03.png" alt="一体何が"> 53 </div> 54 <div id="movie4"> 55 <video id="video4" class="video"> 56 <source src="img/sample.mp4"> 57 </video> 58 111,50 59</footer> 60<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 61<script src="js/custom.ui.video.js"></script> 62<script type="text/javascript"> 63$(function() { 64 var video1 = document.getElementById("video1"); 65 var play1 = document.getElementById("play1"); 66 67 68 /* 69 video1.addEventListener("timeupdate", function(ev) { 70 // もし「shown」クラスがvar playに含まれていて、video1のcurrentTimeが10より上だったら 71 if (!play.classList.contains("shown") && video1.currentTime > 10) { 72 play.classList.add("shown"); 73 } 74 }); 75 */ 76 77 // video1の再生が終了したら 78 video1.addEventListener("ended", function() { 79 alert('video1の再生が終了しました。'); 80 81 // リンク文字を表示 82 play1.classList.add("shown"); 83 84 }); 85 86 // 「次の動画を再生ボタン」を押したら 87 $('next1').on('click', function() { 88 // 次の動画を再生 89 }); 90 91}); 92</script> 93<script> 94$(function(){ 95 //#で始まるアンカーをクリックした場合の処理 96 $('a[href^=#]').click(function(){ 97 //スクロールの速度 98 var speed = 500; 99 //アンカーの値取得 100 var href = $(this).attr("href"); 101 //移動先を取得 102 var target = $(href == "#" || href == "" ? 'html' : href); 103 //移動先を数値で取得 104 var position = target.offset().top-130; 105 //スムーススクロール 106 $("html, body").animate({scrollTop:position}, speed, "swing"); 107 return false; 108 }); 109}); 110</script> 111 112 113</body> 114</html> 115 116~ ``` 117 118 119 120``` 139,22 末尾``` 121 122```css 123 124} 125 /*-------------------------------- 126メインコンテンツ 127--------------------------------*/ 128 129.video { 130 position: absolute; 131 margin-top: 20px; 132 height: 455px; 133 width: 100%; 134 z-index: 0; 135} 136 137#movie1 { 138 position: relative; 139 overflow: hidden; 140} 141 142#movie1 .play { 143 opacity: 0.6; 144 overflow: hidden; 145 top: 0; 146 left: 0; 147 width: 918px; 148 height: 455px; 149 color: white; 150 text-indent: 100%; 151 text-align: center; 152 z-index: 1; 153 visibility: hidden; 154} 155#movie1 .play.shown { 156 visibility: visible; 157} 158#movie1 .play ul { 159 position: absolute; 160 top:10%; 161 width: 100%; 162 margin: 0 auto; 163 padding: 0px; 164} 165#movie1 .play ul li a { 166 color: white; 167} 168 169ul li { 170 list-style: none; 171} 172.img { 173 text-align: center; 174 margin-top:25px; 175} 176 #movie2 { 177 position: relative; 178 overflow: hidden; 179} 180 181#movie2 .play { 182 111,2-93 43% 183 184コード
今こんな感じです!
ほんまに悩んでます。教えてください
あなたの回答
tips
プレビュー