How to play rtmp live stream using videojs？

后端未结

关注

 4  1727

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

相关标签:

4条回答

孤独总比滥情好

2020-12-31 07:29
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
0 讨论(0)
发布评论:

提交评论
- 加载中...

误落风尘

2020-12-31 07:41

<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

0 讨论(0)

星月不相逢

2020-12-31 07:44

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
南旧

2020-12-31 07:51

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...