企业官网建设流程全解析

6、伪流媒体服务器的搭建

Nginx支持伪流媒体播放功能，其可以和客户端的Flash播放器结合，对以.flv、.f4f、.mp4、.m4v、.m4a为扩展名的文件实现流媒体的播放功能。若启用伪流媒体的支持功能，需要按媒体文件格式在配置编译时增加–with-http_f4f_module、–with-http_flv_module和–with-http_mp4_module这3个参数。

6.1、模块配置指令

伪流媒体模块配置指令如表所示。
F4F格式仅在Nginx商业版本中提供。

6.2、伪流媒体配置样例

伪流媒体配置样例是利用Nginx的自动索引功能生成XML格式的目录列表，通过XSLT生成前端页面，使用jQuery插件video.js的Flash播放器播放FLV及MP4格式的流媒体文件。页面效果如图所示。

Nginx配置样例如下：

server{listen8081;server_name localhost;charset utf-8;root /opt/nginx-web/files;default_type text/xml;location /{autoindex on;# 启用自动页面功能autoindex_localtime on;# 使用Nginx服务器时间autoindex_format xml;# 自动页面输出格式为XMLxslt_stylesheet conf/conf.d/example/test.xslt;# 引入XSLT模板文件}location ～\.flv${flv;# FLV文件启用伪流媒体支持}location ～\.mp4${mp4;# MP4文件启用伪流媒体支持mp4_buffer_size 1m;# MP4文件的缓冲区大小为1MBmp4_max_buffer_size 5m;# MP4文件最大缓冲区大小为5MB}}

文件test.xslt内容如下：

<?xmlversion="1.0"encoding="UTF-8"?><xsl:stylesheetversion="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:templatematch="/"><html><head><metacontent="text/html; charset=UTF-8"http-equiv="Content-Type"/><linkrel="stylesheet"href=”https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdn.bootcss.com/video.js/6.6.2/video-js.css" ref= "stylesheet"/> <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script> </head> <body> <h3>Nginx流媒体示例</h3> <table class="table table-striped table-bordered"> <thead> <th>文件名</th> <th>文件类型</th> <th>文件大小</th> <th>文件修改时间</th> </thead> <xsl:for-each select="list/*"> <xsl:sort select="mtime"/> <xsl:variable name="name"> <xsl:value-of select="."/> </xsl:variable> <xsl:variable name="ext"> <xsl:value-of select="substring($name,string-length($name)-2,3)"/> </xsl:variable> <xsl:variable name="size"> <xsl:if test="string-length(@size)&gt;0"> <xsl:if test="number(@size)&gt;0"> <xsl:choose> <xsl:when test="round(@size div1024)&lt;1"> <xsl:value-of select="@size" /></xsl:when> <xsl:when test="round(@size div1048576)&lt;1"><xsl:value-of select="format-number((@size div1024),'0.0')" />K</xsl:when> <xsl:otherwise><xsl:value-of select="format-number((@size div1048576),'0.00')" />M</xsl:otherwise> </xsl:choose> </xsl:if> </xsl:if> </xsl:variable> <xsl:variable name="date"> <xsl:value-of select="substring(@mtime,1,4)"/>-<xsl:value-of select= "substring(@mtime,6,2)"/>-<xsl:value-of select="substring(@mtime,9,2)"/><xsl:text> </xsl:text> <xsl:value-of select="substring(@mtime,12,2)"/>:<xsl:value-of select="substring(@mtime,15,2)"/>:<xsl:value-of select="substring(@mtime,18,2)"/> </xsl:variable> <tr> <td> <a href="{$name}"><xsl:value-of select="."/></a> </td> <td> <xsl:choose> <xsl:when test="$ext='mp4'or$ext='flv'"> <video id="example_video_1" class="video-js vjs-default-skin" controls="true" preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png"> <source src="{$name}" type="video/mp4"/> </video> </xsl:when> <xsl:otherwise> <xsl:value-of select="$ext"/> </xsl:otherwise> </xsl:choose> </td> <td align="center"><xsl:value-of select="$size"/></td> <td><xsl:value-of select="$date"/></td></tr></xsl:for-each></table></body><script>