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

Question

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

5

我想让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>

感谢您的时间和努力！

- Emmet Arries

1

你试过只使用 $("#myVideo").fadeIn() 吗？ - adeneo

我用 $("#myVideo").fadeIn() 替换了 var e = document.getElementById("myVideo"); e.style.display = 'block'，但似乎没有起作用。 - Emmet Arries

你需要包含 jQuery。 - adeneo

我该怎么做？我在script标签中做吗？ - Emmet Arries

@adeneo 现在它可以工作了，谢谢!!!我还没有使用任何jQuery，所以这很有帮助。但是如果我需要的话，我已经知道该怎么做了！您是否想编译并发布为答案，以便我可以批准它？ - Emmet Arries

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

这是使用 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