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

视频在线播放卡慢,如何实现视频分片加载呢?前段 vue,后台 go

  •  
  •   NotreDame · 2021-10-23 19:29:07 +08:00 · 2965 次点击
    这是一个创建于 887 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在就是直接请求一整个视频文件,浏览器直接播放,几百兆的视频几乎无法在线播放。我看视频网站都是把视频切分成 ts 文件,具体怎么实现呢?

    第 1 条附言  ·  2021-10-24 11:01:57 +08:00

    感谢大家的回复,这东西真的看经历,会者不难。像我没有任何音视频相关经验的,只能自己去摸索,看看各大网站的网络请求,之后完全没落地思路,效率奇低。
    发帖之前,我甚至还想着后台把原视频转码一下,但转念一想,转完还是很大不仍是废的嘛。。。

    请教下大家,如果碰到自己完全没接触的领域需求,如何最高效的解决问题呢(身边也没有可以请教的人)?就像这次的需求,我搜索类似“web在线播放视频卡”的关键字,出来的结果完全没用。。。

    第 2 条附言  ·  2021-10-25 10:20:32 +08:00
    谢谢大家的回复,我就不一一回复感谢了,怪打扰的。正视自己的不足,努力积累!
    22 条回复    2021-10-25 15:40:01 +08:00
    NowTime
        1
    NowTime  
       2021-10-23 19:36:42 +08:00 via Android
    这个没记错的话 Nginx 可以满足你的需求,关键字 nginx range 请求

    http://chenzhenianqing.com/articles/926.html
    liangxin149
        2
    liangxin149  
       2021-10-23 19:38:12 +08:00
    使用 ffmpeg 分割成 ts 文件
    easychen
        3
    easychen  
       2021-10-23 19:46:23 +08:00   ❤️ 2
    一般视频都是存到云服务商那里,他们会帮忙切片。

    还有一种是浏览器端播放器可以自己通过 206 部分载入内容,可以在不切片的情况下不加载整个视频文件。
    jim9606
        4
    jim9606  
       2021-10-23 20:32:13 +08:00
    切 ts 片的通常是基于 m3u8 的 HLS 。如果没什么防盗链或者 DRM 之类的需求可以预先切好 m3u8+ts 放服务器上。
    xiaoz
        5
    xiaoz  
       2021-10-24 00:24:20 +08:00 via Android
    4 楼正解,关键词 m3u8 ,ts 切片。
    old9
        6
    old9  
       2021-10-24 09:08:50 +08:00 via Android
    如果视频开头有 moov 元数据,web 服务器支持 range ,那浏览器会自动处理的,不会下载完了才播放
    MonikaCeng
        7
    MonikaCeng  
       2021-10-24 09:09:14 +08:00 via Android
    youtube 那种 dash mpd 切片方式比 hls m3u8 更好,不过用的也比较少。我曾经用 ffmpeg 尝试去切成 mpd ,也可以用。
    dash mpd 的优点可以谷歌一下
    ch2
        8
    ch2  
       2021-10-24 10:31:10 +08:00
    选个支持 http 的 range 功能的播放器就行了
    pupboss
        9
    pupboss  
       2021-10-24 13:08:06 +08:00
    针对楼主的附言,我来给点建议吧

    其实没什么好办法,你不懂的东西就是不懂,如果想提高的话主要是靠平时积累,平时看帖子刷新闻的时候,感兴趣不感兴趣的都点开看看多积累,如果自己好奇心够强就更好了,接着发帖人的问题刨根问底,慢慢就能在所有领域有不错的积累,并且打通各个领域,有一些独到的见解
    NotreDame
        10
    NotreDame  
    OP
       2021-10-24 17:30:13 +08:00
    @pupboss 是啊,不懂得东西真的就是不懂,自己想破脑袋都没有思路。
    xsen
        11
    xsen  
       2021-10-24 19:14:23 +08:00   ❤️ 1
    这个需要专门的流媒体服务器来做的

    关键字(可以基于 nginx ):
    1 ) nginx + rtmp
    2 ) nginx + hls
    fredcc
        12
    fredcc  
       2021-10-24 21:53:47 +08:00 via Android
    直接用公有云的解决方案就行了,源文件丢上去,直接出播放地址,最多对接个防盗链。lz 距离能自己实现知识储备还差很远
    20015jjw
        13
    20015jjw  
       2021-10-25 01:38:43 +08:00
    顺便再回 lz 一句
    不懂很正常的,写 mobile 的不懂 ml 很正常,写 backend 的连博客都搭不出来完全合理。需要的时候问+学 /找人帮忙就行了,重要的更多的还是学习和沟通的能力。
    dany813
        14
    dany813  
       2021-10-25 09:57:51 +08:00
    不懂,就多搜,多交流吧
    markgor
        15
    markgor  
       2021-10-25 10:24:51 +08:00
    实话说,你要弄清楚哪部分卡;
    1 、就算 ts 切片,你服务器带宽就 5M ,10 个人在线看,还不是照样卡吗?
    2 、不知道你后端业务是怎样的,nginx 的话大文件会自动 range ,类似 ts 切片,一次加载一部分,大多数浏览器都支持 range 请求;但和第一点一样,带宽如何?
    3 、一个视频几百兆,首先要做的就是针对请求限流吧?次要就是看带宽是否能支持;
    4 、其实国内 CDN 大多按量计费,你这种场景非常适合上 CDN ,费用起码比你加大服务器带宽要便宜的多。
    5 、如果一毛不拔,建议上传第三方视频平台。
    NotreDame
        16
    NotreDame  
    OP
       2021-10-25 11:01:02 +08:00
    @markgor 感谢,您说到关键点了。我用的阿里云 ecs ,4M 带宽,现在想着把图片视频都放到阿里云 oss 上。
    markgor
        17
    markgor  
       2021-10-25 11:19:52 +08:00
    @NotreDame
    可以給你参考,不过我用的是腾讯云,
    resource.xxx.com -> COS 对象存储 ->回源地址 -> 源服务器。
    这样当请求 A.JPG 文件 不存在时,COS 会回去源服务器拉取,然后存在 COS 。
    代码中几乎不用改动(前提是资源域名做了划分,COS 可否根据请求类型区分是否回源我不确定。
    提醒下,COS 回源有超时策略,大文件不多的情况下建议直接把大文件手动转移到同目录下的 COS 。
    剩余的小文件就按上面的策略跑。

    如果都是大文件的话那还是直接用工具转移去 COS 吧.
    ysc3839
        18
    ysc3839  
       2021-10-25 12:42:01 +08:00 via Android
    切片解决不了带宽问题吧?
    NotreDame
        19
    NotreDame  
    OP
       2021-10-25 14:05:31 +08:00
    @markgor 外网流出流量是不是无解?我看 oss 对象存储内网走 esc 服务器可以免流,但这不最终还是走的 ecs 的带宽,结果还不是一样的卡顿吗?不知道我的理解对不对。
    markgor
        20
    markgor  
       2021-10-25 14:33:22 +08:00
    @NotreDame 阿里云的产品我不清楚,腾讯云的话 oss 对象外网访问是会产生外网费用,但不是走 cvm 带宽。
    shenmirenba
        21
    shenmirenba  
       2021-10-25 15:08:11 +08:00
    云切片对服务器硬件要求较高!
    分享一个自用的方法,视频本地切片好后压缩上传到服务器解压,播放页面引用 index.m3u8 文件即可。
    本地切片如果想折腾的的话 ffmpeg 了解一下,不想折腾直接某宝买个切片软件 68 米。
    关于播放器 Dplayer 了解一下。当初这块也是啋过不少坑,希望对你有所帮助。
    gadfly3173
        22
    gadfly3173  
       2021-10-25 15:40:01 +08:00
    @NotreDame 你完全可以在页面上直接用 OSS 的文件地址,没有特殊需求的话把 bucket 设为公共读就好了,这时候这些静态文件走的是 OSS 的流量,就和你 ECS 没关系了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5388 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 08:36 · PVG 16:36 · LAX 01:36 · JFK 04:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.