如何使用videojs播放RTMP直播流？

Question

如何使用videojs播放RTMP直播流？

15

我正在使用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>

- Natsu

我遇到了同样的问题。显然，从6.0版本开始，videojs不再具有Flash播放器，这意味着它无法播放RTMP（因为没有插件就没有套接字，也就没有打开RTMP的方法）。 - pqnet

4个回答

6

<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>

数据设置技术顺序参数似乎是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

如果您更喜欢使用CDN来获取video.js和video-js.css文件，请将head替换为：

<!--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更值得你投入时间。

- SuiriuS

1

但是iOS Safari浏览器没有Flash，我们如何在iOS设备上播放rtmp？ - Zhang Buzz

3

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

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

- Brad

1

@Finesse 请注意答案中提到的 MediaSource Extensions 部分。https://caniuse.com/#feat=mediasource https://dashif.org/dash.js/ - Brad

0

如果在使用 VLC 媒体播放器时可以正常工作，那么这意味着您的 RTMP 服务器没有问题。您需要检查浏览器是否支持 Flash。由于我们意识到 Chrome 和 Firefox 的最新版本默认自动阻止 Flash，因此我们只需允许网站上的 Flash 即可解决问题。video.js 和 videojs-flash 没有任何问题。请参考附加的截图。

- Qijin

虽然这个答案实际上并没有帮助网站所有者（因为用户不应该知道他们应该授予您的网站特殊权限，而要求这样的特殊权限是不好的），但这是一个有些有用的答案，因为面临的问题的根源在于现代浏览器根本不信任Flash内容（有充分的理由）。 - Ghedipunk

不仅如此，我注意到即使在Chrome上启用Flash也不能使其正常工作。 Chrome实际上表现得好像没有安装Flash插件一样，即使已经安装了（我安装了两次并使用chrome：// components验证了安装）。更糟糕的是，启用Flash只会添加一个关于2020年后不支持它的恼人消息，这与需要Flash的任何内容保持请求插件的安装无关。只有Firefox似乎能正确运行Flash。 - Factor Three

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TopReseller · Accepted Answer

要将RTMP服务器上的流发布到网页上，您有两个选项：

在Flash播放器（Strobe、JwPlayer、FlowPlayer）中嵌入RTMP流
使用支持HLS或MPEG DASH格式的流媒体服务器（如Wowza Streaming Engine）以HTML5格式传递流；如果您的流尚未使用H264和AAC编码，则可能需要进行转码。