单击播放按钮后延迟视频答案

【问题标题】：Delay video after clicking play button单击播放按钮后延迟视频
【发布时间】：2016-04-07 12:58:43
【问题描述】：

我有一个 div，它有一个全宽视频，位置：absolute，点击图片时播放，视频顶部有一些文字。

我想要的是当我单击播放按钮以使顶部的文本淡出以及在文本淡出之后使视频淡入以及当我单击暂停按钮以使视频淡出时之后文本淡入。

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

这是我的代码：

`<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>`

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

【问题讨论】：

标签： javascript jquery css html5-video

【解决方案1】：

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

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

【讨论】：

我这样做了：setTimeout(function playVid() { vid.play(); }, 2000) 但现在视频在 2 秒后开始自行播放。
正确的行是：function playVid() { setTimeout(function(){ vid.play(); , 750);} 谢谢

【解决方案2】：

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

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

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

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

【讨论】：

与下面的答案相同的问题：视频有超时但之后它开始自己播放
所以您不想播放视频，而是在对象淡出时淡入？如果是这样，请将 settimeout 替换为：$("#myVideo").delay(1500).fadeIn(2000)
该行已经存在于：$("#play").click(function(){} 并且它可以工作，但只有在第二次点击播放按钮之后。我第一次点击它，它立即出现
我写错了代码，它只适用于：function playVid() { setTimeout(function(){ vid.play(); }, 750);}