前端播放rtmp协议的视频流文件

梦里梦外; 2022-11-25 11:49 228阅读 0赞

# 前端播放rtmp协议的视频流文件 #

最近公司的项目中需要在大屏可视化的页面中的一个位置是视频监控的，需求大概是这样的：

1.  大屏右下角布局中有六个div，每个可以实时播放监控视频
2.  点击某个视频全屏放大，
3.  自动播放

![format_png][]

先用图片占个位，大概就是这样，很常见的需求，开发起来还是遇到了一些问题，这里分享一下。

我们都知道H5的video标签一共支持三种格式的视频文件：Ogg, MPEG4, WebM,这三种格式对于浏览器的兼容性也不相同。但是video标签肯定是不能直接播放rtmp协议的文件，现在有两种方法：一种就是自己写一套视频处理，那肯定不现实啊，第二种就是用专门的视频处理插件，当然是选用第二种了，省事又快速了，经过查资料最终选用了video.js这个插件，开始开发了！

第一步按照官网的文档下载插件，先写个小demo测试一下

<!DOCTYPE HTML>
    <html>  
      <head>  
      <title>视频直播</title>  
      <meta charset="utf-8">  
      <link href="css/video-js.min.css" rel="stylesheet">
    </head>  
    <body>  
      <h1>直播测试</h1>  
     <video id="my-video" class="video-js" controls preload="auto" width="640px" height="480px"   poster="" data-setup="{}">  
    	<source src="rtmp://ns8.indexforce.com/home/mystream" 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="video.min.js"></script>  
    </body>  
    </html>
    复制代码

然后出现的是如下图所示：什么也没有。

![format_png 1][]

我发现我没有写错，然后就开始日常的百度查找，结果找到一大堆，其中有一个篇中讲到video.js从6.x.x版本以上就不支持播放rtmp协议的文件了，意思就是说我们得下载5.x.x版本的或者更低的，回头看了一下我从官网下载的版本竟然是7.5.5的，怪不得出不来，然后又找不到5.x.x版本的在哪下载！

于是想着应该有cdn吧，官网上的例子用的就是cdn地址，把cnd地址在浏览器中打出来，改了一个5.x.x版本的发现竟然能找到文件，就弄到本地，结果还是发现还是出不来，好吧，继续百度！

看了几篇文章又发现说文件必须都得在服务器上才可以，我就写个demo还得弄到服务上吗？无语了，没办法，还得弄啊，毕竟是工作啊！好在我电脑装过http-server，在当前目录下启动一下就行。

http-server -r-1   //启动
    复制代码

启动好之后发现不报错了，但是还是播放不出来任何东西。发现好像当前video没有没有注册到videojs中，又写了一段js代码

嗯可以了，哈哈哈，好了，开始正式项目的开发，弄好了之后又发现不能自动播放，只能手动，我想说这是监控吗？哈哈哈！

![format_png 2][]

最后发现是浏览器要求视频播放的容器不得小于400\* 300，放大了其中一个的尺寸，发现确实是这样的，那又能怎么办啊，全部弄成400\*300的那产品不得过来跟我拼命了，再说了也不符合我们前端的职业要求啊，只要别中途乱加需求，其他的都给你保证解决了啊。

回过头来看看控制台的输出，发现两种要求，1.不得低于400 \*300 2.或者别跨域；

![format_png 3][]

既然第一种pass,那就着手第二种要求来解决，把 [vjs.zencdn.net/swf/5.3.0/v…][vjs.zencdn.net_swf_5.3.0_v]

开始修改，第一种方法，再加一行代码搞定；

第二种方法，在源码中找到options.swf的配置项，把默认的地址改成本地地址就可以。两种方法都可以。

![format_png 4][]

好了，看一下效果还可以，也满足了需求，再样式处理一下，就完成了。

![format_png 5][]

最后总结一下video.js的使用过程：

1.  下载源代码，js ， css , swf，注意源代码的版本必须是6.x.x版本以下的。
2.  代码必须跑在服务上，不管是本地的服务还是最后部署到服务器上的，直接电脑磁盘打开的是不行的。
3.  自动播放的需要满足不小于400 \*300 , 或者把swf文件放到本地别跨域就行。

[format_png]: /images/20221124/eb5a953a1c80494080a3e7164940f250.png
[format_png 1]: /images/20221124/60449c1ae9ec4305bc966c0d65a63c06.png
[format_png 2]: /images/20221124/54c1535b81524946949489461f1f3694.png
[format_png 3]: /images/20221124/c87522cdc0fd40f0a89a691d7c646c45.png
[vjs.zencdn.net_swf_5.3.0_v]: http://vjs.zencdn.net/swf/5.3.0/video-js.swf%E4%B9%9F%E4%B8%8B%E8%BD%BD%E5%88%B0%E6%9C%AC%E5%9C%B0%EF%BC%8C%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%8Boption%E4%B8%8D%E5%B0%B1%E4%B8%8D%E5%AD%98%E5%9C%A8%E8%B7%A8%E5%9F%9F%E4%BA%86%E5%90%97%EF%BC%9F
[format_png 4]: /images/20221124/0e9ac2ee3a8b43eebe71e6046de42515.png
[format_png 5]: /images/20221124/de553d47e64e485b854cb50c6e72b8a2.png