实现RTSP和RTMP视频流在页面播放

最新推荐文章于 2024-08-04 00:56:02 发布

置顶入门咖啡

最新推荐文章于 2024-08-04 00:56:02 发布

阅读量4.1k

点赞数

分类专栏： RTMP RTSP RTSP可用地址文章标签： js java web

本文链接：https://blog.csdn.net/qq_42447856/article/details/105723947

版权

RTMP 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

RTSP

1 篇文章 0 订阅

订阅专栏

RTSP可用地址

1 篇文章 0 订阅

订阅专栏

话不多说直奔主题，今天公司让写个js实现rtsp或rtmp视频流在页面播放。因为从来没搞过这些，查找了大量的文章。然后代码如下：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>播放器</title>
        <!-- 导入的videojs是7.0版本以上的，集成VHS协议库，可播放HLS流媒体视频 -->
        <link href="videolib/css/video-js.min.css" rel="stylesheet" type="text/css">
        <script src="videolib/js/video.min.js"></script>
        <!-- 引入的videojs-flash.js插件主要是为播放rtmp视频流-->
        <script src="videolib/videojs-flash.min.js"></script>
        <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>
            <!-- RTMP直播源地址-->
            <source src="rtmp://58.200.131.2:1935/livetv/hunantv">    
        </video>
    </head>
    <body>
        
        <script> 
            var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')})
            player.play();
        </script>
    </body>
</html>

上面实现是基于video.js实现，百度网盘需要的自己拿。链接：https://pan.baidu.com/s/17jF17HINoyuHeLXyVIzL_Q
提取码：sov7

我在公司会报错，因为公司进行了相关处理，在家就没问题（ps:在公司搞了一下午，就是不能播放。哭唧唧）

RTSP、RTMP和HTTP协议的区别：https://blog.csdn.net/liujiayu2/article/details/80658395

一些补充说明

1.对于Video.js 5.x及更低版本，Flash技术是Video.js核心存储库的一部分。对于Video.js 6.x及更高版本，Flash技术位于单独的存储库中。videojs-flash.js插件只与Video.js> = 6.0.0一起使用，因为之前的flash技术已构建到版本中！ video.js不能直接播放rtmp流，需要videojs-flash.js 这个插件。

2.对于播放HLS视频，在videojs7版本之前要引用videojs-contrib-hls.js插件才能播放。videojs7版本之后的，Video.js默认捆绑VHS（VHS是videojs-contrib-hls的继承者。它是一个源自videojs-contrib-hls存储库的源处理程序。虽然videojs-contrib-hls最初设计用于在所有浏览器上添加HLS播放，但我们意识到引擎也可以播放其他格式，所以videojs-contrib-hls这个项目已经被弃用，被videojs-http-streaming继承）。默认情况下，在Video.js 7及以上版本中已经集成Videojs HTTP Streaming（昵称为VHS），不必使用videojs-http-streaming插件就可以播放HLS，DASH和未来的HTTP流媒体协议视频。

注意：

1.对于Video.js 7之前的版本（明确说是6版本的），必须使用videojs-http-streaming.js插件才可以播放HLS，DASH和未来的HTTP流媒体协议视频，即使它们不是本机支持的。

2.VHS支持HLS和DASH和未来的HTTP流媒体协议。

再次补充：以上测试是在Hbuilderx环境下实现的，但是换到vscode编辑器运行rtmp流就无法播放！最后发现好像是因为Hbuilderx自带服务器环境，而vscode没有，所以会出现这种情况。

2020.04.28

前面分享了rtmp视频流的显示（PS：我之前不知到，rtmp和rtsp不一样，可以直接播放），也正是这个问题，困扰了我好久，在我不懈的努力翻阅大量的博客文章，终于找到了rtsp在IE和Chrome的显示心里乐开了花。

1.RTSP在IE浏览器显示：

实现代码：

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>RTSP视频流播放器IE</title>
    </head>
	<body> 
	<!--[if IE]> 
	   <object type='application/x-vlc-plugin' id='vlc' events='True' 
	       classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="https://get.videolan.org/vlc/3.0.8/win32/vlc-3.0.8-win32.exe" width="720" height="540"> 
	          <param name='mrl' value='rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov' /> 
	          <param name='volume' value='50' /> 
	          <param name='autoplay' value='true' /> 
	          <param name='loop' value='false' /> 
	          <param name='fullscreen' value='false' /> 
	    </object> 
	<![endif] 
	[if !IE]> 
	    <object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540" pluginspage="http://www.videolan.org" codebase="https://get.videolan.org/vlc/3.0.8/win32/vlc-3.0.8-win32.exe"> 
	        <param name='mrl' value='rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov' /> 
	        <param name='volume' value='50' /> 
	        <param name='autoplay' value='true' /> 
	        <param name='loop' value='false' /> 
	        <param name='fullscreen' value='false' /> 
	    </object> 
	    
	<![endif] -->
	 <object type='application/x-vlc-plugin' id='vlc' events='True' width="600" height="450" pluginspage="http://www.videolan.org" codebase="https://get.videolan.org/vlc/3.0.8/win32/vlc-3.0.8-win32.exe"> 
	        <param name='mrl' value='rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov' /> 
	        <param name='volume' value='100' /> 
	        <param name='autoplay' value='true' /> 
	        <param name='loop' value='false' /> 
	        <param name='fullscreen' value='false' /> 
	    </object> 
</object>
	</body 
</html> 
<script>
    //获取 VLC js对象
    function getVLC(name) {
        if (window.document[name]) {
            return window.document[name];
        }
        if (navigator.appName.indexOf("Microsoft Internet") == -1) {
            if (document.embeds && document.embeds[name])
                return document.embeds[name];
        } else {
            return document.getElementById(name);
        }
    }
    var vlc = getVLC("vlc");//获取vlc对象
 
        // 根据地址切换视频
    function doGo(mrl) {
        try {
            var vlc = getVLC("vlc"),
                    itemId = vlc.playlist.add(mrl);
                vlc.playlist.playItem(itemId);
 
            } catch (e) {
                console.log(e);
            }
        }
 
        //调用
    doGo(mrl)
     
</script>