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

提个问题,麻烦大佬回答下。关于二进制视频的前端播放

  •  
  •   MuscleOf2016 · 2018-07-06 16:52:37 +08:00 · 3840 次点击
    这是一个创建于 2332 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现在后端给了一个一个接口,将存放的视频数据作为二进制数据 application/octet-stream 通过接口可以下载。但是只根据接口并不能知道是视频。 前端的 video 标签 也不能直接通过 src 进行播放。 有什么好的解决办法吗?还是只能改成接口返回视频文件的地址。

    9 条回复    2018-07-07 01:01:08 +08:00
    MuscleOf2016
        1
    MuscleOf2016  
    OP
       2018-07-06 16:55:49 +08:00
    chrome 上倒是可以直接播放,safari 或者安卓手机上就不行了。看了下,chrome 上是对二进制做了处理。
    iMusic
        2
    iMusic  
       2018-07-06 18:03:21 +08:00   ❤️ 1
    是 responseType 设置 blob 类型,然后通过 URL.createObjectURL 转换为 blob: 开头的地址吧
    darkkylin
        3
    darkkylin  
       2018-07-06 18:07:11 +08:00   ❤️ 1
    参考下 bilbil 的播放器 flv.js 或许有用。
    tinywhale
        4
    tinywhale  
       2018-07-06 18:14:12 +08:00   ❤️ 1
    视频...这也太广泛了 mp4? ts/hls? webm? rtmp/flv? mjpeg!? 写个检测器看下文件开头,比如 mp4 开头有 ftyp isom。或者让后端改接口。
    wdlth
        5
    wdlth  
       2018-07-06 20:04:05 +08:00   ❤️ 1
    如果是 MP4 这种浏览器支持的编码,是可以通过 MSE 进行播放的,参考 hls.js 、flv.js ,对于浏览器不支持的编码,要么就调用播放器,要么就转换。
    wdlth
        6
    wdlth  
       2018-07-06 20:04:22 +08:00   ❤️ 1
    应该是 H.264 编码
    MuscleOf2016
        7
    MuscleOf2016  
    OP
       2018-07-06 22:59:53 +08:00
    @wdlth 通过接口下载的二进制文件是没有后缀的,加了 mp4 的后缀后下载的文件就能播放了。 不知道有什么不改后端的方式能处理。
    wdlth
        8
    wdlth  
       2018-07-06 23:18:45 +08:00
    @MuscleOf2016 video 标签可以指定类型的,加 type="video/mp4",或者你可以让后端加上 Content-Type 头。
    MuscleOf2016
        9
    MuscleOf2016  
    OP
       2018-07-07 01:01:08 +08:00
    @wdlth video 指定了 mp4 在 chrome 上可以,换到安卓浏览器,safari 上就凉了。Content-Type 现在是 application/octet-stream,换成 video/mpeg4 的我不确定,试试。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1222 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:18 · PVG 02:18 · LAX 10:18 · JFK 13:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.