V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
moose123
V2EX  ›  程序员

一个视频如何实现在 H5 下逐帧播放呢?

  •  
  •   moose123 · 2018-02-18 15:21:12 +08:00 · 9320 次点击
    这是一个创建于 2449 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一个普通视频如何在 H5 下能逐帧播放,比如点一个按钮播放一帧。。多谢。

    12 条回复    2018-02-19 11:22:22 +08:00
    metorm
        1
    metorm  
       2018-02-18 15:34:07 +08:00 via Android
    服务端事先解析成图片?
    azh7138m
        2
    azh7138m  
       2018-02-18 15:39:44 +08:00 via Android
    video.js 了解一下
    blahgeek
        3
    blahgeek  
       2018-02-18 18:01:04 +08:00
    设 video.currentTime
    darfux
        4
    darfux  
       2018-02-18 18:14:26 +08:00
    试试这个:
    https://github.com/allensarkisyan/VideoFrame
    基于 currentTime 封装了一下
    GreatHumorist
        5
    GreatHumorist  
       2018-02-18 18:53:21 +08:00 via iPhone
    看过一个骚操作,视频全转成图片,用 js 控制播放,我开始以为 gif,查看到源码兼职惊呆了
    moose123
        6
    moose123  
    OP
       2018-02-18 20:07:57 +08:00
    多谢各位
    MrFireAwayH
        7
    MrFireAwayH  
       2018-02-18 22:00:20 +08:00
    @GreatHumorist 记得没错的话 P 站的某些 GIF 图 也是一堆静态图组成的 骚的很
    mbfan
        8
    mbfan  
       2018-02-19 00:55:26 +08:00 via iPhone
    试试 canvas ?
    http://www.w3school.com.cn/tags/canvas_drawimage.asp 里的最后一个例子。
    digimoon
        9
    digimoon  
       2018-02-19 01:00:29 +08:00
    视频每帧全转图片的话那容量大多了吧
    最早见到的是在手办站,手办转一圈拍成视频让用户左右拖拽转着看
    sivacohan
        10
    sivacohan  
       2018-02-19 01:09:42 +08:00 via iPhone
    直接做不行,考虑转图片吧。
    视频里面有个概念叫关键帧,同时 web 的跳转又是靠时间的,在 web 上实现逐帧处理超级麻烦。
    RqPS6rhmP3Nyn3Tm
        11
    RqPS6rhmP3Nyn3Tm  
       2018-02-19 02:17:48 +08:00 via iPhone
    @MrFireAwayH 为啥,说不通啊
    anheiyouxia
        12
    anheiyouxia  
       2018-02-19 11:22:22 +08:00 via Android
    @moose123 https://greasyfork.org/zh-CN/scripts/27614-html5 播放器增强插件 /code
    你参考一下这段代码,可以直接抄
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1092 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:35 · PVG 03:35 · LAX 12:35 · JFK 15:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.