javascript - 如何让 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