V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
TomatoYuyuko
V2EX  ›  问与答

页面 mp4 可以做到先加载,再延迟播放吗

  •  
  •   TomatoYuyuko · 2021-07-09 11:01:36 +08:00 · 1115 次点击
    这是一个创建于 1244 天前的主题,其中的信息可能已经有所发展或是发生改变。

    框架是 nuxt,想做一个滚动到指定位置播放 mp4,mp4 是作为背景出现的,没有操作框,lottie 好像不支持 mp4,暂时用的 video 标签,但是不知道该怎么写让他先加载后播放。如果是滚动到触发位再加载的话我但是 mp4 加载太慢了不能第一时间展示出来

    11 条回复    2021-07-12 11:41:32 +08:00
    kop1989
        1
    kop1989  
       2021-07-09 11:10:55 +08:00
    用本地存储,页面一上来就将视频文件拉到本地存储,然后储发事件后播放本地存储的文件。
    如果本地存储地方不够,那么就不适合当作网页的素材。
    3dwelcome
        2
    3dwelcome  
       2021-07-09 11:27:34 +08:00
    https://demo.doveaz.xyz/

    也是 V 站搜来的,如何预加载 mp4 视频。
    TomatoYuyuko
        3
    TomatoYuyuko  
    OP
       2021-07-09 11:28:56 +08:00
    @3dwelcome 哦哦这个是指隐藏的 video 不会播放但是会加载吗,666
    TomatoYuyuko
        4
    TomatoYuyuko  
    OP
       2021-07-09 11:30:15 +08:00
    @kop1989 本地存储指得是?要转化成二进制存储?
    netwjx
        5
    netwjx  
       2021-07-09 11:44:25 +08:00
    能, video 不自动播放就行了, 仔细看事件, 是否有加载完成
    digimoon
        6
    digimoon  
       2021-07-09 11:53:16 +08:00
    我是取了视频的第一帧放最上层,等底下的视频层加载完成后再移除上层然后播放
    xieqiqiang00
        7
    xieqiqiang00  
       2021-07-09 13:42:02 +08:00 via Android
    创建一个 video,但不播放,不就可以预载了么
    TomatoYuyuko
        8
    TomatoYuyuko  
    OP
       2021-07-09 14:06:31 +08:00
    @netwjx video 没有 controls 的情况下,该怎么控制一个关闭自动播放的 video 元素播放?我查了 video 标签好像没有暴露出来方法呀
    TomatoYuyuko
        9
    TomatoYuyuko  
    OP
       2021-07-09 14:07:33 +08:00
    @xieqiqiang00 那该怎么手动播放?除了 2L 说的 display none 的方法
    xieqiqiang00
        10
    xieqiqiang00  
       2021-07-09 14:39:57 +08:00
    @TomatoYuyuko 直接获取到 video 的 DOM 对象然后调用 play 就好了
    netwjx
        11
    netwjx  
       2021-07-12 11:41:32 +08:00
    @TomatoYuyuko 发下你去哪查的资料?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3517 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 10:50 · PVG 18:50 · LAX 02:50 · JFK 05:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.