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

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

1 个答案: