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

Question

我试图让我的 HTML5 视频元素在加载时淡入，（我目前正在使用 Javascript canplaythrough 显示它，正如您在下面看到的代码中看到的那样，但这有点苛刻。）如何让 HTML5 视频元素轻轻淡入？我可以使用 JavaScript 或 jquery，但我不太了解其中一个，所以一些完整的代码会很有帮助！

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

<script>
var e = document.getElementById("myVideo");
e.style.display = 'none'

var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
    var e = document.getElementById("myVideo");
       e.style.display = 'block'
};

</script> 

<video style="display: block;" id="myVideo" width="320" height="176" controls>
  <source src="http://www.jeffarries.com/videos/jeff_arries_productions_intro.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

感谢您的时间和精力！

Answer 1

以下是使用 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);
}

FIDDLE