Question

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

Answer 1

<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

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

<!--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而不是闪光灯上的时间更长

Answer 2

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

在Flash播放器（Strobe，JwPlayer，FlowPlayer）中嵌入RTMP流
使用支持Wowza Streaming Engine的流媒体服务器以HTML5格式（HLS或MPEG DASH）传送流;如果您的流尚未使用H264和AAC编码

Answer 3

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

考虑使用更兼容的分发协议，例如DASH，Media Source Extensions支持该协议。

Answer 4

如果在使用vlc媒体播放器时有效，则表示您的rtmp服务器正常。您必须检查浏览器是否支持闪存。由于我们意识到最新版本的chrome和Firefox默认会自动阻止闪存。我们只需在网站上允许Flash即可解决问题。 video.js和videojs-flash没有任何问题。 Plz参考附带的截图。

如何使用videojs播放rtmp直播？

4 个答案: