How to play rtmp live stream using videojs？

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>

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

The data-setup techorder parameter seems to be necessary for videojs to use flash.

If that doesn't work then make sure that your javascript files are all good. As of version 6 of video.js it no longer supports flash by default. https://docs.videojs.com/tutorial-faq.html#q-how-can-i-play-rtmp-video-in-videojs

I am using nginx for my server.

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

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

If you would rather use a CDN for the video.js and video-js.css files replace the head with

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

Note: Your time is better spent learning HLS or DASH rather than flash

Browsers don't support RTMP. The only way to connect to RTMP streams in-browser is to use Flash.

Consider using a more compatible distribution protocol, such as DASH, which is supported with Media Source Extensions.

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

embed RTMP stream in a Flash player (Strobe, JwPlayer, FlowPlayer)
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

If it works when using vlc media player, it means your rtmp server is ok. You have to check whether the browser support flash or not. Since we realized that latest versions of chrome and Firefox automatically block flash by default. We were able to fix the issue by simply allowing flash on website. There was nothing wrong with video.js and videojs-flash. Plz refer to the attached screenshot.

来源：https://stackoverflow.com/questions/43271187/how-to-play-rtmp-live-stream-using-videojs

标签

video.js

live-streaming