質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

【緊急!】動画再生中にリンクを表示をさせる方法

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 786

TomokiSugiura

score 24

こんにちは!

前回、LPの案件で質問させてもらったものです。
ここでの答えを参考に作ってはみたのですが、なぜかリンクの文字だけ表示されません。

どこが変なのでしょうか。

今作ってる途中のURLを貼るので、具体的に教えてもらうと助かります。
http://devserver-room8.cloudapp.net/movie/

他の知り合いに聞いたらsetintervalとdisplay: noneを使うと言われたのですがどちらがいいのかわかりません。

<!--ムービー-->
<div id="container" class="main980">
    <div id="movie1">
    <video id="video1"  autoplay class="video">
        <source src="img/sample.mp4">
    </video>
    <div id="play1" class="play">
        <ul>
            <li>
                <a href="https://www.youtube.com/" target="_blank">You Tube</a>
                <!-- 次の動画を再生ボタン -->
                <button id="next1"><a href="#video2">次の動画を再生</a></button>
            </li>
        </ul>
    </div>
    </div>
    <div class="img">
        <img src="img/menu-btn01.png" alt="リノベーションだったら">
    </div>
  <div id="movie2">
  <video id="video2" class="video">
        <source src="img/sample.mp4">
    </video>
    <div id="play2" class="play">
        <ul>
            <li>
                <a href="https://www.youtube.com/" target="_blank">You Tube</a>
                <!-- 次の動画を再生ボタン -->
                <button id="next1"><a href="#video3">次の動画を再生</a></button>
            </li>
        </ul>
    </div>
    </div>
    <div class="img">
        <img src="img/menu-btn02.png" alt="もっと詳しく知りたい人の為に">
    </div>
    <div id="movie3">
    <video id="video3" class="video">
        <source src="img/sample.mp4">
    </video>
    <div id="play3" class="play">
        <ul>
            <li>
                <a href="https://www.youtube.com/" target="_blank">You Tube</a>
                <!-- 次の動画を再生ボタン -->
                <button id="next1"><a href="#video4">次の動画を再生</a></button>
            </li>
        </ul>
    </div>
    </div>
    <div class="img">
        <img src="img/menu-btn03.png" alt="一体何が">
    </div>
    <div id="movie4">
    <video id="video4"  class="video">
        <source src="img/sample.mp4">
    </video>
                                                                                111,50
</footer>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/custom.ui.video.js"></script>
<script type="text/javascript">  
$(function() {
    var video1 = document.getElementById("video1");
    var play1 = document.getElementById("play1");


    /*
    video1.addEventListener("timeupdate", function(ev) {
        // もし「shown」クラスがvar playに含まれていて、video1のcurrentTimeが10より上だったら
        if (!play.classList.contains("shown") && video1.currentTime > 10) {
            play.classList.add("shown");
        }
    });
    */

    // video1の再生が終了したら
    video1.addEventListener("ended", function() {
        alert('video1の再生が終了しました。');

        // リンク文字を表示
        play1.classList.add("shown");

    });

    // 「次の動画を再生ボタン」を押したら
    $('next1').on('click', function() {
        // 次の動画を再生
    });

});
</script>
<script>
$(function(){
    //#で始まるアンカーをクリックした場合の処理
    $('a[href^=#]').click(function(){
        //スクロールの速度
        var speed = 500;
        //アンカーの値取得
        var href = $(this).attr("href");
        //移動先を取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        //移動先を数値で取得
        var position = target.offset().top-130;
        //スムーススクロール
        $("html, body").animate({scrollTop:position}, speed, "swing");
        return false;
    });
});
</script>


</body>
</html>

~             ```

                                                                      139,22       末尾```

}
 /*--------------------------------
メインコンテンツ
--------------------------------*/

.video {
    position: absolute;
    margin-top: 20px;
    height: 455px;
    width: 100%;
    z-index: 0;
}

#movie1 {
    position: relative;
    overflow: hidden;
}

#movie1 .play {
    opacity: 0.6;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 918px;
    height: 455px;
    color: white;
    text-indent: 100%;
    text-align: center;
    z-index: 1;
    visibility: hidden;
}
#movie1 .play.shown {
    visibility: visible;
}
#movie1 .play ul {
    position: absolute;
    top:10%;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
}
#movie1 .play ul li a {
    color: white;
}

ul li {
    list-style: none;
}
.img {
    text-align: center;
    margin-top:25px;
}
 #movie2 {
    position: relative;
    overflow: hidden;
}

#movie2 .play {
                                                                                  111,2-93      43%

コード

今こんな感じです!

ほんまに悩んでます。教えてください

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • 退会済みユーザー

    2016/10/24 16:45

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる