HTML5视频预载解决方案

我正在创建一个带有一些动画的网站。其中之一是标志动画。它被称为'lbv.mp4'。由于它具有一定的权重，自动播放有一定的延迟，所以我决定在满载时显示内容。HTML5视频预载解决方案

的计划是：

视频检查装载
启动视频
一类添加到页面元素触发动画
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 MaxelRus

我不明白你正在尝试做的。当你的视频被完全加载时，你会隐藏它？ – codename44

@ codename44在我的视频加载后，它会在0.75秒延迟后播放并隐藏。 – MaxelRus

loadeddata事件手段：

媒体的第一帧完成加载。

readyState === 4表示：

足够的数据是可用的和下载速率足够高，使媒体能够通过播放到结束没有中断。

您有机会触发loadeddata，但readyState不是4。由于loadeddata只触发一次，视频将永远不会播放。

您应该尝试添加日志以验证此假设。

我会尝试如下：

使用<video>与autoplay
监听playing事件上的视频，开始过渡
监听ended事件上的视频将其隐藏

参考属性，事件和readyState：

来源

2016-09-21 14:11:37 codename44

HTML5视频预载解决方案

回答

相关问题