Javascript 如何使HTML5视频在加载完成后淡入？

我试图让我的HTML5视频元素在加载时淡入（我目前使用Javascript

canplaythrough

，正如你在下面看到的代码中看到的那样，但这有点刺耳。）我如何让HTML5视频元素轻轻淡入？我对JavaScript或jquery都很满意，但我对两者都不太了解，所以一些完整的代码会非常有用

下面是代码：（如果你用运行代码片段运行代码，它不会很好地工作，所以我强烈建议你去我的网站，它在这里是我的视频页面，如果你等待30秒/分钟（直到视频加载）就会工作）：

var e=document.getElementById（“myVideo”）；
e、 style.display='none'
var vid=document.getElementById（“myVideo”）；
vid.oncanplaythrough=函数（）{
var e=document.getElementById（“myVideo”）；
e、 style.display='block'
};

您的浏览器不支持HTML5视频。

以下是如何使用javascript在视频中淡入淡出

var e = document.getElementById("myVideo");
e.style.opacity = 0;

var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
    setTimeout(function() {
        var e = document.getElementById('myVideo');
        fade(e);
    }, 5000);
};

function fade(element) {
    var op = 0;
    var timer = setInterval(function() {
        if (op >= 1) clearInterval(timer);
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1 || 0.1;
    }, 50);
}

---

您是否尝试了

$（“#myVideo”）.fadeIn（）

我将

var e=document.getElementById（“myVideo”）；e.style.display='block'

替换为

$（“#myVideo”）.fadeIn（）

而且它似乎不起作用。应该可以正常工作->我做的和你在小提琴上做的完全一样。但是如果你转到我的视频页面，它不知怎么会不起作用！你必须包括jQuery`我假设我编辑JavaScript末尾的

50

，以更改fadein的时间？是的，这就是间隔时间，减少它为了获得更快的动画效果，我一直在摆弄它，我得出的结论是，我需要它在视频完全加载完毕时出现，而不仅仅是

canplaythrough

，因为这是不可靠的（视频一直显示，然后我播放它，它卡在中间），有什么方法可以做到这一点吗？有很多不同的方法，但是

canplaythrough

通常是您想知道视频何时可以播放的方法，但是它会做出一些假设，例如猜测视频的其余部分可以根据当前下载速率加载等。我唯一能想到的另一件事是检查视频

readyState

，类似->的东西，感谢您提供的就绪状态代码！尝试使用它时也会出现不稳定的结果，我想我更喜欢

canplaythrough

。您是否愿意为代码添加计时器，以便它在收到

canplaythrough

后等待5秒，然后执行？我现在的JavaScript不太好，sorrY