How to play rtmp live stream using videojs?

Natsu picture Natsu · Apr 7, 2017 · Viewed 51k times · Source

I'm using OBS to push live stream to my local rtmp server(node-rtsp-rtmp-server), and it works well with VLC media player. I just want to put it into a webpage and i found videojs. It didnt work and returns Specified “type”-attribute “rtmp/mp4” is not supported. it seems my rtmp server didnt reveive any requests from this webpage. So what i missed? here is my code:

<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

TopReseller picture TopReseller · Apr 10, 2017

To publish a stream from a RTMP server to a web page, you have 2 options:

  1. embed RTMP stream in a Flash player (Strobe, JwPlayer, FlowPlayer)
  2. deliver stream in a HTML5 format (HLS or MPEG DASH) using a streaming server that supports that like Wowza Streaming Engine; this may also require transcoding if your stream is not already encoded with H264 and AAC