前端怎么播放RTMP、RTSP、HTTP协议 的流媒体资源？

Question

在前端页面上实现播放RTMP、RTSP、HTTP协议 的流媒体资源

Answer 1

HTTP的流可以用video来播放，RTMP和RTSP，一般需要插件或者脚本库的支持。可以了解一些jwplayer库。

Answer 2

可以使用此控件来实现 传送门

Answer 3

关于播放rtmp http 协议的流媒体资源，最后采用的video.js来进行播放的

http的 依赖 videojs-contrib-hls 和video.js

 <link rel="stylesheet" type="text/css" href="css/video-js.min.css"/>
<script src ="http://vjs.zencdn.net/5.19/video.min.js"> </script>     
<script src = "https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"> </script> 


<video id="example-video" width="600" height="300" class="video-js vjs-default-skin" controls>
  <source src="http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8"
   type="application/x-mpegURL">
 </video>
 
 js文件
 var player = videojs('example-video');
    player.play();
    

rtmp的依赖 video.js videojs-flash
<link href="css/video-js.min.css" rel="stylesheet">
<script src="js/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/...;></script>

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="" data-setup="{}">
<source src="rtmp://60.174.223.96/v1/**" type="rtmp/flv"/>

<p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
 </p>

</video>

js文件

        var myPlayer = videojs('my-video');
        videojs("my-video").ready(function(){
            var myPlayer = this;
            myPlayer.play();
        });

以上就是关于播放rtmp 和http流媒体播放 亲测有效，关于rtsp的目前还没找到合适的办法，有合适方案欢迎交流。 如果需要在vue项目上运行 需要配置下webpack,如有疑问，可以联系我。