HTTP-FLV详解及分析（二）

HTTP-FLV详解及分析（一 ）https://developer.aliyun.com/article/1472362

6、flv.js 网页播放

前面我们已经解决了跨域问题

html.flv 文件内容如下：

worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#error_log  logs/error.log  debug;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
# 添加RTMP服务
rtmp {
    server {
        listen 1935; # 监听端口
        chunk_size 4000;
        application live {
            live on;
      gop_cache on;
      hls on;
      hls_path html/hls;
        }
    }
}
# HTTP服务
http {
    include       mime.types;
    default_type  application/octet-stream;
    #access_log  logs/access.log  main;
    server {
        listen       8080; # 监听端口
 
 location /flv {
      flv_live on;
      chunked_transfer_encoding on; 
      add_header 'Access-Control-Allow-Origin' '*';
     add_header "Access-Control-Allow-Credentials" "true";
     add_header "Access-Control-Allow-Methods" "*";
     add_header "Access-Control-Allow-Headers" "Content-Type,Access-Token";
     add_header "Access-Control-Expose-Headers" "*";  
    }
    location /stat.xsl {
            root html;
        }
    location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
    location / {
            root html;
        }
    }
}

因此双击 flv.html 文件，可以看到网页播放成功

三、FLV 格式简介

1、简介

FLV（Flash Video）是现在非常流行的流媒体格式，由于其视频文件体积轻巧、封装播放简单等特点，使其很适合在网络上进行应用，目前主流的视频网站无一例外地使用了 FLV 格式。另外由于当前浏览器与 Flash Player 紧密的结合，使得网页播放 FLV 视频轻而易举，也是 FLV 流行的原因之一。

FLV 是流媒体封装格式，我们可以将其数据看为二进制字节流。总体上看，FLV 包括文件头（File Header：9 字节）和文件体（File Body）两部分，其中文件体由一系列的 Tag 及 Tag Size 对组成。

注意这个大小关系：PreviosTagSize = TagDataSize + 11;

2、FLV 格式解析

先来一张图，这是上面我们播放的视频文转换为 FLV 文件

使用 Notepad++ 进行查看二进制数据（注：这里要求 Notepad++ 安装了 HexEditor 插件）

可以参考我以前的博客：notepad++安装HexEditor插件查看二进制文件

SampleVideo_1280x720_20mb.flv 文件二进制内容如下：

①、header

头部分由以下几部分组成：Signature（3 Byte）+Version（1 Byte）+Flags（1 Bypte）+DataOffset（4 Byte）

• signature 占 3 个字节：固定 FLV 三个字符作为标示。一般发现前三个字符为 FLV 时就认为他是 flv 文件。
• Version 占 1 个字节：标示 FLV 的版本号。 这里我们看到是 1
• Flags 占 1 个字节：内容标示。第 0 位和第 2 位，分别表示 video 与 audio 存在的情况。(1 表示存在，0 表示不存在)。截图看到是 0x05，也就是 00000101，代表既有视频，也有音频。
• DataOffset 4 个字节：表示 FLV 的 header 长度。 这里可以看到固定是 9

②、body

FLV 的 body 部分是由一系列的 back-pointers（ 后向指针） + tag 构成

• back-pointers固定 4 个字节，表示前一个 tag 的 size。

• 从上图可以看到前一个 tag 的 size 为 0

• tag分三种类型：video、audio、scripts。

• tag 组成：tag type[1B]+tag data size[3B]+Timestamp[3B]+TimestampExtended[1B]+stream id[3B]+tag data

• type1 个字节。8 为 Audio，9 为 Video，18 为 scripts

• 从上图可以看到 type 为 0x123 = 18 --> scripts

• tag data size3 个字节。表示 tag data 的长度：从 streamd id 后算起。

• 从上图可以看到 tag data size 为 0x123 = 297

• Timestreamp3 个字节。 时间戳

• 从上图可以看到 Timestreamp 为 0x000000 = 0

• TimestampExtended1 个字节。 时间戳扩展字段

• 从上图可以看到 TimestampExtended 为 0x00 = 0

• stream id 3 个字节。 总是 0
• tag data 数据部分

• tag 头伪代码：
  

四、FLV Adobe 官方标准

FLV 文件格式标准是写在 F4V/FLV file format spec v10.1 的附录 E 里面的 FLV File Format。

1、单位说明

HTTP-FLV详解及分析（三）https://developer.aliyun.com/article/1472364