单击播放按钮后延迟视频

Question

我有一个 div，它有一个带 position:absolute 的全宽视频，在单击图像时播放，视频顶部有一些文本。

我想要的是当我点击播放按钮让上面的文字淡出，文字淡出后，让视频淡入，以及当我点击暂停按钮让视频淡出out 和 after 使文本淡入。

我取得了接近我想要的效果，但由于某种原因，我无法在第一次单击播放按钮时延迟视频淡入。第二次点击后似乎工作正常。

这是我的代码：

`<video preload="none" id="myVideo" width="100%" >
<source src="wp-content/themes/quill/images/video.mp4" type="video/mp4">
</video>`

`<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script> 
var vid = document.getElementById("myVideo"); 

function playVid() { 
    vid.play(); 
} 

function pauseVid() { 
    vid.pause(); 
} 
</script>

<script>
    $("#play").click(function(){
        $("#pause").fadeIn(1000);
        $("#myVideo").delay(1500).fadeIn(2000);
        $("#play").fadeOut(1000);
        $(".toph1").fadeOut(1000);
        $(".toph2").fadeOut(1000);
        $(".introduction").fadeOut(1000);
        $(".howitworks").fadeOut(1000);
        $(".logo").fadeOut(1000);
    });
</script>

<script>
    $("#pause").click(function(){
        $("#play").fadeIn(1000);
        $(".toph1").fadeIn(1000);
        $(".toph2").fadeIn(1000);
        $(".introduction").fadeIn(1000);
        $(".howitworks").fadeIn(1000);
        $(".logo").fadeIn(1000);
        $("#pause").fadeOut(1000);
        $("#myVideo").fadeOut(0);
    });
</script>`

我在页面底部添加了脚本。

Answer 1

如果你想有延迟，尝试使用超时功能：

setTimeout(function() {
    // do here..
}, 750)

Answer 2

Fadeout 有另一个可选参数，可以为 on complete 函数传递：

  $( "#div" ).fadeOut( "slow", function() {
    setTimeout(function() {vid.play();}, 750)
  });

上述调用中的函数只有在淡出动画完成后才会被触发。您需要将#div 更改为正确的 ID。

http://api.jquery.com/fadeout/#fadeOut-duration-complete

单击播放按钮后延迟视频

Delay video after clicking play button

javascript

css

jquery

html5-video