我正在创建一个有一些动画的网站。其中之一是标志动画。它叫'lbv.mp4‘。由于它有一定的权重,所以我决定在它满载时显示内容。
计划是:
setTimeout
表示视频的长度,这将使visibility: hidden
为剪辑打开下面的静态图像。下面的代码更好地描述了这一点:
video.addEventListener('loadeddata', function () {
if (video.readyState === 4) {
video.play();
$('#page').addClass('transition');
document.setTimeout(function(){
video.attr('style', 'visibility: hidden');
}, 750);
}
唯一的问题是,我既不能使用纯JS,也不能使用JQuery。视频没有加载,课程也没有提供。在Safari,Chrome和Firefox中进行了测试。
因此,最后一个问题是:“还有其他的办法可以让事情变得更容易吗?或者如何解决我的问题?”
发布于 2016-09-21 14:11:37
事件loadeddata
的意思是:
媒体的第一帧已完成加载。
readyState === 4
的意思是:
有足够的数据--而且下载率足够高--媒体可以不间断地播放到最后。
您有可能触发loadeddata
,但readyState
不是4
。因为loadeddata
只被触发一次,所以这段视频永远不会播放。
您应该尝试添加日志来验证这一假设。
我要尝试的是:
<video>
与autoplay
结合使用playing
事件以启动转换ended
事件以隐藏它属性、事件和readyState的引用:
https://stackoverflow.com/questions/39616925
复制相似问题