Question

我对javascript / jquery知之甚少，我真的需要一些帮助。我正在做一个在加载时播放全屏html5视频的网站，经过一段时间后，它会在其他内容中消失。我为其他内容设置了延迟fadeIn函数，并为视频div设置了fadeOut延迟。这个视频div被另一个循环的视频取代（我无法找到改变src的方法，所以当另一个淡出时，这个div会淡入）。淡入的内容有position：fixed和display：none。我现在使用的代码可以正常工作，但我无法设置一个跳过按钮，跳过延迟时间并立即播放淡入淡出。我尝试过在stackoverflow上找到的其他解决方案，但没有完全工作（可能是因为我的代码是如何编写的）。我的目标是跳过视频并在单击按钮时淡入其他内容，如果没有，则在延迟用完后内容加载。此外，可能更改视频的src而不是切换div（但这并不重要）。

这是HTML

<div id="v1">
        <video autoplay poster="screenshot.jpg" id="background" controls>
            <source src="http://www.ray-gun.pt/clientes/Natal_2016/RayGun_NatalparaTodoAno_sem_nada.mp4" type="video/mp4" width="100%" height="auto">
            Your browser does not support HTML5 video.
        </video>
    </div>
    <div id="vloop">
        <video autoplay loop poster="screenshot.jpg" id="background" controls>
            <source src="http://www.ray-gun.pt/clientes/Natal_2016/NATAL_SO_PRODUTO.mp4" type="video/mp4" width="100%" height="auto">
            Your browser does not support HTML5 video.
        </video>
    </div>
    <a href="#" id="skipbtn">
        <img src="images/skip.png" alt="saltar" />
    </a>
    <div class="row">
        <div id="show1" class="content faded">
            <div class="wrap">
                <div class="social">
                    <div>
                        <a class=fb href="https://www.facebook.com/RayGun.LX/?fref=ts" target="_blank"></a>
                    </div>
                    <div>
                        <a class="tw" href="https://twitter.com/raygun_lx" target="_blank"></a>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="header">
                        <img src="images/header.png" alt="header"/>
                    </div>
                <row>
                    <div class="btnsCont">
                        <button class="mrgr" data-toggle="modal" data-target="#squarespaceModal">Doação</button>
                        <input type="button" value="Dúvidas" onclick="window.location.href='mailto:me@anydomainname.com'" />
                    </div>
                </row>
            </div>
        </div>
        </div>
        <div id="show2" class="patrocinios faded">
            <ul>
                <li> 
                    <a href="https://www.ray-gun.pt/?page_id=2015&lang=pt">
                        <img src="images/raygun_logo.png" alt="Ray Gun" />
                     </a>
                </li>
                <li> 
                    <a href="http://www.cvidaepaz.pt/site/">
                        <img src="images/comvidapaz_logo.png" alt="Com Vida e Paz" />
                    </a>
                </li>
                <li> 
                    <a href="http://cercizimbra.org.pt">
                        <img src="images/cercizimbra_logo.png" alt="CERCI" />
                    </a>
                </li>
                <li> 
                    <a href="http://www.ajudadeberco.pt/">
                        <img src="images/ajudaberco_logo.png" alt="Ajuda de Berço" />
                    </a>
                </li>
            </ul>
        </div>
    </div>

继承了相关的CSS

#skipbtn{
  z-index: 10;
  position: fixed;
  top: 20px;
  right: 20px;
}
#vloop{
  display: none;   
}
.content {
  position: fixed;
  top: 10;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  display: none;
}
.patrocinios{
  width: 100%;
  margin: 0 auto;
  position: fixed;
  bottom: 10px;
  display: none;
}

现在正在运作的jquery。

function fade() {
            $('#v1, #skipbtn').delay(50000).fadeOut(100).hide(0);
            $('#vloop').delay(50000).fadeIn(100);
        }
        fade();
        $(".faded").each(function(i) {
          $(this).delay(50000).fadeIn();
        });

这个例子：Adding a Skip Button to FastForward a .fadeIn / .fadeOut?是最接近我的那个，它是完全相同的目标，但是当我在第一个函数的fadeIn行中尝试多个选择器时，它不起作用。我真的不知道如何克服这一点。感谢您的帮助。

Answer 1

在朋友的帮助下，我完成了目标。我不得不改变整个功能。如果其他人遇到同样的问题，我会在这里发布。

var vid1 = $('#v1').find('video');
        var vid2 = $('#vloop').find('video');

        $(vid1).on("ended", function() {
            playVideo2();
        });

        $(vid2).on("ended", function() {
            playVideo1();
        });


        function playVideo2() {
            $('#v1, #skipbtn').fadeOut(50).hide(0);
            $('#vloop').fadeIn(50);
            videoPlaying = "video2";
            $(".faded").each(function(i) {
            $(this).fadeIn();
        });

            $(vid2)[0].play();
            $(vid1)[0].pause();
        }

        function playVideo1() {
            $('#vloop').fadeOut(50).hide(0);
            $('#v1').fadeIn(50);
             $(".faded").each(function(i) {
            $(this).fadeOut();
        });

            videoPlaying = "video1";
            $(vid1)[0].play();
            $(vid2)[0].pause();
        }
        playVideo1();


        $('#skipbtn').on('click', function() {
            if (videoPlaying == "video1") {
                playVideo2();
            } else if (videoPlaying == "video2") {
                playVideo1();
            }

        });

Javascript - 在x时间后同时fadein和fadeout多个div并添加一个跳过按钮

1 个答案: