关键字: Flv.JS | Flv JS | Flv-JS | html5 FLV Player |
0x001: 前言
以下涉及到 flv.JS 所有内容均是 V1.5.0 版本内的, 如方法, 属性, 常量, 监听等等, 不讨论视频编解码, 只陈述官方文档内容. 采用文字 + 图片形式, 单文字描述怕不好理解, 单图片模式又怕将来哪天会挂掉, 现在很多年份久的博文就有这情况, 也不是没遇到过. 非前端工作者, 部分术语可能描述不得当, 望理解. 纯手码字一下午, 只是为了时间久后遗忘再回来看一下.
0x002: 架构图
0x003: API 文档相关内容
- flvjs.isSupported()
- // 查看当前浏览器是否支持 flv.JS, 返回类型为布尔值
- flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)
- /* 创建一个 Player 实例, 它接收一个 MediaDataSource(必选), 一个 Config(可选), 如:
- var flvPlayer = flvjs.createPlayer({
- type: 'flv',
- url: 'http://example.com/flv/video.flv'
- }); */
MediaDataSource 的字段列表如下,
这里说下最后一个 segments 字段 (其余字段都很简单), 它接收一个数组, 类型为 MediaSegment,MediaSegment 的字段列表如下,
如果 segments 字段存在, transmuxer 将把此 MediaDataSource 视为多片段源. 在多片段模式下, 将忽略 MediaDataSource 结构中的 duration filesize url 字段.
什么个意思呢, 用白话说就是如果指定了 segments 字段那么之前指定的 duration filesize url 字段就不再生效了, 将标志这是一个多片段合成一个的视频, 进度条的总时长就等于各片段相加的和, 所以每个片段的 duration filesize 一定要指定准确.
Config 字段很多, 就不一一介绍了, 如下
- flvjs.getFeatureList()
- // 返回一些功能特性列表, 比如是否支持 FLV 直播流, H264 MP4 视频文件等等, 如下
- flvjs.FlvPlayer(mediaDataSource, optionalConfig)
- flvjs.NativePlayer(mediaDataSource, optionalConfig)
- // 这两个方法都继承自 Player 抽象接口, 一个是创建适用于 FLV 的 Player 实例, 一个是适用于 MP4 的 Player 实例, 如下
其实 flvjs.createPlayer(略) 内部就是根据 type 分别创建不同的 Player 实例, 自己去看看源码就知道了. 如下
- interface Player (abstract)
- // 它里面的每个方法或属性其实就是你自己创建出来 Player 实例的部分方法或属性, 可直接调用. 如下
- flvjs.LoggingControl
- // 一个全局接口, 用于设置 flv.JS 的日志级别. 如下
举几个简单的例子:
- flvjs.LoggingControl.getConfig()// 获取当前日志项的配置情况, 如
- enableCallback: true
- enableDebug: true
- enableError: true
- enableInfo: true
- enableVerbose: true
- enableWarn: true
- forceGlobalTag: true
- globalTag: "flv.js"
- flvjs.LoggingControl.enableVerbose
- /* 输出详细调试信息, 默认为 true, 页面加载后会在控制台打印一些解码日志信息, 如 forceGlobalTag 例子中的日志那样.
- 设置 false; 控制台不再打印.*/
- flvjs.LoggingControl.forceGlobalTag
- // 默认 false;
未设置之前的 log 打印是这样
- [MSEController]> MediaSource onSourceOpen
- [FLVDemuxer]> Parsed onMetaData
- [FLVDemuxer]> Parsed AVCDecoderConfigurationRecord
- [FLVDemuxer]> Parsed AudioSpecificConfig
- [MSEController]> Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640028
- [MSEController]> Received Initialization Segment, mimeType: audio/mp4;codecs=mp4a.40.5
- [FlvPlayer]> Maximum buffering duration exceeded, suspend transmuxing task
设置 true; 后是这样
- [flv.JS]> MediaSource onSourceOpen
- [flv.JS]> Parsed onMetaData
- [flv.JS]> Parsed AVCDecoderConfigurationRecord
- [flv.JS]> Parsed AudioSpecificConfig
- [flv.JS]> Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640028
- [flv.JS]> Received Initialization Segment, mimeType: audio/mp4;codecs=mp4a.40.5
- [flv.JS]> Maximum buffering duration exceeded, suspend transmuxing task
- [flv.JS]> MediaSource onSourceEnded
- flvjs.Events
- // 可以与 Player.on()/ Player.off() 一起使用的一系列常量. 需要使用前缀 flvjs.Events. 如下
- flvjs.ErrorTypes
- flvjs.ErrorDetails
- // 是几个错误类型以及相应类型对应的错误详情, 可以用来做些判断. 也需要使用前缀 flvjs.Events. 如下
0x004: 直播播放 文档相关内容
您需要在 MediaDataSource 中提供一个实时流 URL(可以是 HTTP 或 webSocket), 并指示 isLive:true. 如下
- var flvPlayer = flvjs.createPlayer({
- type: "flv",
- isLive: true,
- url: "http://127.0.0.1:8080/live/livestream.flv"
- });
0x005: 多段播放 文档相关内容
多片段配置示例, 需注意的是文档强调: 您必须为每个细分提供准确的持续时间.
0x006: 使用记录
可以在播放前指定 MediaDataSource 参数, hasAudio(是否有音频) 及 hasVideo(是否有视频), 单独指定单独有, 都指定则都有.
SeekTo 功能 或 player.currentTime 属性 接收的值类型是 Number, 如 78 或 108.999, 单位秒
0x007: 问题记录
Q1: 点击进度条的未缓冲区域时, 不会跳转到对应时间处继续播放, 而是无响应. 比如 6 分钟 MV, 当前播放到 3 分 0 秒, 当前缓冲到 5 分 0 秒, 如果点击进度条到 5 分 01 秒或之后播放器就无响应了.
A1: 目前用户层的解决办法只能先点击到离缓冲区最近的时长, 如 4 分 59 秒, 播放器才会自动缓冲接下来未缓冲的片段. 小文件基本无感, 大文件才会有体现.(点播, 视频源类型 flv,H264+AAC, 大小 111 MB )
QN:...........
0x008: 完结
来源: https://www.cnblogs.com/zhifa/p/13252838.html