nginx播放视频无法播放 nginx视频格式

转载

桃太郎 2024-03-27 12:05:32

文章标签 nginx播放视频无法播放 centos nginx ffmpeg ide 文章分类 运维

文章目录

相关环境：
一、Nginx部署：
二、ffmepg部署
三、配置ffmpeg转发
四、写前端访问代码查看：
五、报错相关：

1、如果到启动时缺少了ffmpeg模块

六、写在最后：

任务需求：由于各个浏览器已经终止了适配Flash播放插件，故此监控视频从之前的Rtmp格式变为Hls(m3u8)格式

一、Nginx部署：

主要安装 1、编译安装nginx

# yum -y install pcre-devel openssl openssl-devel        //安装依赖
# wget http://nginx.org/download/nginx-1.16.0.tar.gz        //下载nginx包
# tar xf nginx-1.16.0.tar.gz && cd nginx-1.16.0
# ./configure --prefix=/application/nginx  --with-http_ssl_module    //编译安装nginx
# make && make install

2、修改nginx配置文件，添加如下内容并重新载入配置文件

# vim /application/nginx/conf/nginx.conf
user  root;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       20000;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    location /hls {
    types{
    application/vnd.apple.mpegurl m3u8;
    video/mp2t ts;
    }
    root html;
    add_header Cache-Control no-cache;
    add_header Access-Control-Allow-Origin *;
     }
}
}
# /application/nginx/sbin/nginx -s reload //重新加载启动

二、ffmepg部署

ffmpeg命令参考这个文章

1、安装依赖
# yum install yasm -y
2、下载ffmpeg并安装
# git clone https://git.ffmpeg.org/ffmpeg.git ffmpeg 
# cd ffmpeg		//解压并进入目录
# ./configure --prefix=/usr/local/ffmpeg
# make
# make install
3、拷贝命令到/usr/bin		//方便后面调用
# ls /usr/local/ffmpeg/        //查看安装目录生成的文件
bin  include  lib  nohup.out  share
# cp /usr/local/ffmpeg/bin/* /usr/bin/	//复制命令

三、配置ffmpeg转发

1、启用ffmpeg进行推流
# ffmpeg -re -rtsp_transport tcp -i rtsp://账号:密码@IP:端口/mpeg4/ch1/sub/av_stream.mp4 -acodec aac -strict experimental -ar 44100 -ac 2 -b:a 96k -r 25 -b:v 500k -s 480*480 -c `copy` -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 /application/nginx/html/hls/test.m3u8

-i  //要处理视频文件的路径，此处地址是一个监控摄像头
-acodec //音频处理的格式
-strict experimental 	//更标准的严格性
-ar //设置音频采样率
-ac //设置通道为2
-b:a //要将输出文件的音频比特率设置为96 kbit/s
-r //要强制输出文件的帧频为24 fps
-b:v //要将输出文件的视频比特率设置为500 kbit/s。
-s //分辨率，传输的带宽根据分辨率来设定的，-b:v不能控制
-f //强制输出的视频格式
-hls_time  //为切片的秒数
-hls_list_size //设置播放列表保存的最多条目，我这里设置为0会保存有所片信息，默认值为5
-hls_wrap //为切片的个数

Tips:-s参数在ffmpeg转发命令里面就算使用了-c copy参数也不会生效！具体的分辨率是根据海康威视监控视频的分辨率来定的（主码流和子码流不相同）。主码流一般为1920x1080P[平均2M网速]，子码流一般为1280x720P[平均1.2M网速]，704x576[平均800Kb]。海康威视平台配置如下图，设置码率类型为定码率的话流量要稳定一些。

nginx播放视频无法播放 nginx视频格式_ide

四、写前端访问代码查看：

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="shortcut icon" href="./static/logo.ico">
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%; display: flex; align-items: center}
    #video{
         width:1000px;
        height:600px;
    }
  </style>
  <title>无BUG</title>
  

</head>
<body style="margin:0;overflow:hidden">
     <video id="video" muted></video>
      <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script>
      function initVideo () {
          let video = document.getElementById('video')
          if(Hls.isSupported()) {
            let hls = new Hls()
            //该hls地址为nginx配置中的地址
            hls.loadSource('http://192.168.31.88:20000/hls/test.m3u8')
            hls.attachMedia(video)
            hls.on(Hls.Events.MANIFEST_PARSED,()=>{
                video.play()
            });
        }else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = 'http://192.168.31.88:20000/hls/test.m3u8'
          video.addEventListener('loadedmetadata',function() {
                video.play()
            })
        }
      }
      initVideo()
      
  </script>
</body>

</html>