ffmpeg+nginx+video.js实现推流网页播放

最新推荐文章于 2023-04-03 16:15:43 发布

言格与甄意

最新推荐文章于 2023-04-03 16:15:43 发布

阅读量5.6k

点赞数 3

分类专栏： ffmpeg 文章标签： ffmpeg video.js nginx rtmp rtmp://localhost:1935/live I/

本文链接：https://blog.csdn.net/Wj___xx/article/details/102795889

版权

ffmpeg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近研究了下m3u8视频流推送问题，记录下。

主要用到工具为ffmpeg+nginx+video.js，其中video只是用来实现网页播放。ffmpeg安装我参考的是https://blog.csdn.net/qq_39516859/article/details/81843419。不复杂，添加下环境变量就成。

如图，在cmd输入ffmpeg，这样就是安装成功了。

ffmpeg其他命令我就不说了，毕竟不是主要玩这个。我只用到了推流命令

ffmpeg -i "m3u8地址" -c:v copy -c:a aac -b:a 320k -ar 44100 -strict -2 -f flv "rtmp://127.0.0.1:1935/live"

也不过多赘述，m3u8地址我自己是用的虎牙直播来测试的。网上大多数测试地址都失效，或者就是慢。虎牙直播地址怎么获取稍后说。介绍下上面命令，需要关注的是rtmp://127.0.0.1:1935/live，这个是自己推流地址。我是想本地测所以用的127.0.0.1，也可以推送到哔哩哔哩或者其他直播网站，后面用对应平台的rtmp地址就行。如图，哔哩哔哩的为两个拼接

flv则是推流的视频格式。推流到其他平台很简单，到这就完成了。但是本地的话还需要工具nginx。

先说说nginx的配置，D:\Program Files\nginx1.7\conf路径下的nginx.conf。用记事本或者代码编辑器打开，新增配置。我的配置如下

rtmp{
	server{
	listen 1935;

		application live{
		live on;
		record off;
		}
		application hls{
		live on;
		hls on;
		hls_path nginx-rtmp-module/hls;
		hls_cleanup off;
		}
	}
}

其中1935端口可以自行改变，rtmp默认为1935。live则是端口后面。。。暂且称为项目名吧。其中需要关注的是hls_path nginx-rtmp-module/hls;这个东东，常规下载管网安装的nginx是不支持rtmp的。会报错，没记错是不识别rtmp。那是因为没有集成nginx-rtmp-module这个模块，这样直接cmd输入ffmpeg推流命令会报rtmp://localhost:1935/live I/O error。

我用的已经上传，需要的自己下支持rtmp的nginx1.7。这个需要积分，有的大佬希望能施舍点，5积分不多。我也提供百度云链接，毕竟我也深受没有积分的痛苦。

下载解压，配置环境变量。

接着启动nginx就行，网页访问127.0.0.1出现如图代表成功

准备工作做好了。接下来获取m3u8，我用的虎牙直播的。打开虎牙直播，网页源代码。接着搜索sHlsUrl和sStreamName

拼接：http://al.hls.huya.com/backsrc/1199518199908-1199518199908-5249842996685307904-2399036523272-10057-A-0-1.m3u8

获取到url，执行

ffmpeg -i "http://aldirect.hls.huya.com/backsrc/31618642-31618642-135801033333932032-734400720-10057-A-0-1.m3u8" -c:v copy -c:a aac -b:a 320k -ar 44100 -strict -2 -f flv "rtmp://127.0.0.1:1935/live"

这就是推流成功了，但是咱们还需要直观清晰的看不是，所以我准备写个html页面播放。恩，video.js这个大坑，我就踩下去了。video.js是可以播放推流的。知道video这个插件既可以直接播放m3u8格式（不考虑跨域问题），也可以播放flv格式。废话不多说上我的html代码

<html>  
  <head>  
  <title>视频直播</title>  
  <meta charset="utf-8">  
  <link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">  
  <!-- If you'd like to support IE8 -->  
  <script src="http://vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>  
</head>  
<body>  
  <h1>直播间</h1>  
 <video id="my-video" class="video-js" controls preload="auto" width="640" height="300" data-setup="{}">  
    <source src="rtmp://127.0.0.1:1935/live/" type="rtmp/flv">   
    <p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。  
      To view this video please enable JavaScript, and consider upgrading to a web browser that  
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>  
    </p>  
 </video>  
 <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>  
</body>  
</html>

必须注意的是video的版本不能太高，我用的5.8.8版本。之前版本是7.2，不管怎么样都不成功。还有就是得打开flash插件，这个不支持h5直接播放。

最后就是，有错误请指出，但是别喷。我就一小白

言格与甄意

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
ffmpeg+nginx+video.js实现推流网页播放

最近研究了下m3u8视频流推送问题，记录下。主要用到工具为ffmpeg+nginx+video.js，其中video只是用来实现网页播放。ffmpeg安装我参考的是https://blog.csdn.net/qq_39516859/article/details/81843419。不复杂，添加下环境变量就成。如图，在cmd输入ffmpeg，这样就是安装成功了。ffmpeg其他命令我...
复制链接

扫一扫