首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >HTML5视频预加载解决方案

HTML5视频预加载解决方案
EN

Stack Overflow用户
提问于 2016-09-21 12:44:36
回答 1查看 574关注 0票数 0

我正在创建一个有一些动画的网站。其中之一是标志动画。它叫'lbv.mp4‘。由于它有一定的权重,所以我决定在它满载时显示内容。

计划是:

  • 将检查视频是否加载。
  • 启动视频
  • 向页面元素中添加类以触发动画
  • setTimeout表示视频的长度,这将使visibility: hidden为剪辑打开下面的静态图像。

下面的代码更好地描述了这一点:

代码语言:javascript
运行
复制
    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中进行了测试。

因此,最后一个问题是:“还有其他的办法可以让事情变得更容易吗?或者如何解决我的问题?”

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-21 14:11:37

事件loadeddata的意思是:

媒体的第一帧已完成加载。

readyState === 4的意思是:

有足够的数据--而且下载率足够高--媒体可以不间断地播放到最后。

您有可能触发loadeddata,但readyState不是4。因为loadeddata只被触发一次,所以这段视频永远不会播放。

您应该尝试添加日志来验证这一假设。

我要尝试的是:

  • <video>autoplay结合使用
  • 侦听视频上的playing事件以启动转换
  • 侦听视频上的ended事件以隐藏它

属性、事件和readyState的引用:

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39616925

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档