如何使用videojs播放rtmp直播流？答案

【问题标题】：How to play rtmp live stream using videojs？如何使用videojs播放rtmp直播流？
【发布时间】：2017-09-02 10:17:42
【问题描述】：

我正在使用 OBS 将直播流推送到我的本地 rtmp 服务器（node-rtsp-rtmp-server），它适用于 VLC 媒体播放器。我只是想把它放到一个网页中，我找到了videojs。它不起作用并返回不支持指定的“类型”属性“rtmp/mp4”。 看来我的 rtmp 服务器没有收到来自该网页的任何请求。那么我错过了什么？这是我的代码：

<head>
    <meta charset="utf-8">
    <link href="./video-js-6.0.0/video-js.css" rel="stylesheet">
    <script src="./video-js-6.0.0/video.js"></script>
    <script src="./video-js-6.0.0/videojs-flash.min.js"></script>
    <script>
        videojs.options.flash.swf = "./video-js-6.0.0/video-js.swf"
    </script>
</head>
<body>
   <video  id='vid' class='video-js' controls height=300 width=600>
      <source src="rtmp://127.0.0.1:1935/live/pokemon" type="rtmp/mp4"/>
    </video>
    <script>
        var player = videojs('vid');
    </script>
</body>

【问题讨论】：

我遇到了同样的问题。显然videojs从6.0版本开始就没有flash播放器了，这意味着它不能播放RTMP（因为没有socket就没有办法打开RTMP，没有插件就没有socket）

标签： video.js live-streaming

【解决方案1】：

要将流从 RTMP 服务器发布到网页，您有两种选择：

在 Flash 播放器（Strobe、JwPlayer、FlowPlayer）中嵌入 RTMP 流
使用支持类似 Wowza 流引擎的流服务器以 HTML5 格式（HLS 或 MPEG DASH）传送流；如果您的流尚未使用 H264 和 AAC 编码，这也可能需要转码

【讨论】：

一个新选项在 HTML5 浏览器（包括移动）中不可用：WebRTC。在videonow.live 上实时试用或部署broadcastlivevideo.com 解决方案（免费下载）。 RTMP 到 WebRTC 涉及一些转码，至少对于音频（WebRTC 需要 Opus）和 Wowza SE 来处理多种流类型。

【解决方案2】：

<html>
<head>
  <title> Stream Player </title>
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <script src="video.js"></script>
  <script>videojs.options.flash.swf = "video-js.swf";</script>
</head>
<body>
 <center>
   <video 
     id="livestream" 
     class="video-js vjs-default-skin vjs-big-play-centered"
     controls 
     autoplay
     preload="auto" 
     data-setup='{"techorder" : ["flash","html5] }'>
     <source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4">
   </video>
 </center>
</body>
</html>

data-setup techorder 参数似乎是 videojs 使用 flash 所必需的。

如果这不起作用，请确保您的 javascript 文件都正常。从 video.js 的第 6 版开始，它默认不再支持 flash。 https://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs

我正在为我的服务器使用 nginx。

https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/

https://github.com/arut/nginx-rtmp-module

如果您更愿意为 video.js 和 video-js.css 文件使用 CDN，请将头部替换为

<!--The latest versions of video.js no longer support flash or rtmp-->
<link href="https://vjs.zencdn.net/5.19/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.19/video.js"></script>

注意：你最好花时间学习 HLS 或 DASH，而不是 Flash

【讨论】：

但是iOS Safari浏览器没有Flash，怎么在iOS设备上播放rtmp？

【解决方案3】：

浏览器不支持 RTMP。在浏览器中连接到 RTMP 流的唯一方法是使用 Flash。

考虑使用更兼容的分发协议，例如媒体源扩展支持的 DASH。

【讨论】：

@Finesse 请注意答案中提到 MediaSource 扩展的部分。 caniuse.com/#feat=mediasource dashif.org/dash.js

【解决方案4】：

如果在使用 vlc 媒体播放器时可以正常工作，则表示您的 rtmp 服务器正常。您必须检查浏览器是否支持闪存。因为我们意识到最新版本的 chrome 和 Firefox 默认会自动阻止 flash。我们能够通过简单地允许网站上的 Flash 来解决这个问题。 video.js 和 videojs-flash 没有任何问题。请参考随附的屏幕截图。

【讨论】：

虽然这个答案实际上并不能帮助网站所有者（因为用户不应该知道他们应该向您的网站授予特殊权限 - 并且要求这样的特殊权限是skeevy），这是一个有点帮助的答案，因为这里面临的问题的根源是现代浏览器根本不信任 Flash 内容（有充分的理由）。
不仅如此，我还注意到，即使在 Chrome 上启用 Flash 也无法使其真正起作用。 Chrome 实际上就像没有安装 flash 插件一样（我安装了两次并使用 chrome://components 验证了安装）。更糟糕的是，启用 Flash 只会添加一条关于 2020 年之后不再支持它的烦人消息，这无关紧要，因为任何需要 Flash 的东西都会不断请求安装插件。只有 Firefox 似乎可以正确运行 flash。