Nginx应用与运维——Nginx Web服务应用实战(伪流媒体服务器的搭建)

Nginx Web服务应用实战

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配置样例如下:

bash 复制代码
server {
    listen 8081;
    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;                            # 自动页面输出格式为XML
       xslt_stylesheet conf/conf.d/example/test.xslt;   # 引入XSLT模板文件
    }

    location ~ \.flv$ {
        flv;                                            # FLV文件启用伪流媒体支持
    }
    location ~ \.mp4$ {
        mp4;                                            # MP4文件启用伪流媒体支持
        mp4_buffer_size       1m;                       # MP4文件的缓冲区大小为1MB
        mp4_max_buffer_size   5m;                       # MP4文件最大缓冲区大小为5MB
    }
}

文件test.xslt内容如下:

bash 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
    <html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <link rel="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 div 1024) & lt; 1"> <xsl:value-of select="@size" /></xsl:when>
                                    <xsl:when test="round(@size div 1048576) & lt; 1"><xsl:value-of select="format-number((@size div 1024), '0.0')" />K</xsl:when>
                                    <xsl:otherwise><xsl:value-of select="format-number((@size div 1048576), '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>
相关推荐
kkkkkkkkkk_Z几秒前
新手自学嵌入式 | 学习日记:Linux驱动复习之系统移植(U-Boot篇)
linux·运维·学习
Amos_Web15 分钟前
Markdonw语法
开发语言·前端·javascript
小万74216 分钟前
刚发布就冲上GitHub热榜!Filee支持244种格式转换,完全免费还全本机运行
前端
星光不问赶路人18 分钟前
Vue 3 对象监听与快照:ref 和 reactive 的关键差异
前端·vue.js
世界一刘先生18 分钟前
不引入 JSZip,自己写一个 ZIP 打包器:CRC32、中央目录与 UTF-8 文件名
前端
全栈项目管理程序猿19 分钟前
ArcGIS JS 基础教程(34):体元系列 - 等值面 VoxelIsosurface
前端·javascript
代码搬运媛20 分钟前
如何使用 @codemirror/view 库创建一个简单的代码编辑器
前端
huali23 分钟前
草稿该存在哪:per-session 是怎么成为共识的
前端·产品经理·产品
IPIPD24 分钟前
Proxifier规则为什么没有生效?从连接日志定位规则命中与DNS路径
前端