微信搜索superit|邀请体验:大数据, 数据管理、OLAP分析与可视化平台 | 赞助作者:赞助作者

前端播放流媒体(RTMP,RTSP,HLS)

video aide_941 25℃

前端播放流媒体(RTMP,RTSP,HLS)
https://blog.csdn.net/dj0379/article/details/73698624/
2017年06月25日 01:47:10 dj0379 阅读数:14896
前言
最近项目需要流媒体的播放,后端一共提供了 三种流数据(RTSP,RTMP,HLS),在不同的场景可能会使用到不同方式播放,就需要做到适配, 支持所有的流数据播放。花了一段时间研究,在这里和大家分享一下,还有些遗留问题,看大家有没有好的方法。

RTSP
简介
这种协议流数据前段播放,没有特别好的解决方法,需要在本机装一个vlc 插件,依靠这个插件才能让 RTSP 协议 在网页上能播放,但是目前高版本的 Chrome 浏览器不支持 NPAPI 插件,也就是说高版本的 Chrome 浏览器还是不能播放(46 以上的版本都不行)。

html code

代码很简单,更播放 flash 差别不是很大,需要改几个点,
1.object 标签的 type , codebase 属性
2.param 标签js code
//获取 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);
}
}

 // 根据地址切换视频
    function doGo(mrl) {
        try {
            var vlc = getVLC("vlc"),
                itemId = vlc.playlist.add(mrl);
            vlc.playlist.playItem(itemId);

        } catch (e) {
            console.log(e);
        }
    }
   //调用
 doGo(mrl)

我们用js 代码主要是用来切换地址,达到如果流数据 地址变化, 内容跟着变化。

VlC 给我们提供了丰富的API ,请查看 VLC API

HLS
简介
Http Live Streaming (简称HLS) ,它在移动 Web 浏览器支持挺好,所以现在好多移动端直播都在用此协议。但在 PC Chrome,Firefox 上不支持,所以还需要借助flash 。在研究的过程中发现了 video.js 这个插件,代码托管 在 github 上,开源。但是它不直接支持播放 HLS 协议的播放. 需要借助 videojs-contrib-hls 但是我怎么测试都没成功,播放不了。大家有测试通的可以联系我。 经过一番的查找,github 上一顿搜索,黄天不负有心人,找见了这个库FZ-live 我看他也是基于 video.js 的。

html code

直接写video 标签, 在 source 的 src 给上路径就可以,还有个要求,就是资源 不能跨域,需要在同一域下。

js code
//切换地址播放
var player = videojs(‘video’);
player.ready(function() {
var myPlayer = this;
myPlayer.src(url);
myPlayer.load(url);
myPlayer.play();
});
我们用js实现了切换地址播放。 video.js 这个插件 提供了好多api 我们有需要可以查看,可以做出好多功能

RTMP
简介
Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。所以我们就只能借助 flash 了 。 在研究 video.js 插件的时候, 看它也能提供 RTMP 的播放,这下我们就省事多了。

html code

看到我没有写 source 标签,我们直接用js 来操作,做到播放 RTMP 和 HLS 的适配 .

js code
player.ready(function() {
var myPlayer = this;
myPlayer.reset();
if (scope.type == ‘hls’) {
console.log(‘hls’);
myPlayer.src({ type: “application/x-mpegURL”, src: scope.url });
} else {
myPlayer.src({ type: “rtmp/flv”, src: scope.url });
console.log(‘rtmp’);
}
myPlayer.load(scope.url);
myPlayer.play();
});
我们借助 player.src() 方法就是实现,根据不同的类型设置 src 的type 就可以。但是每次我们更改地址的时候,记得调用一下 player.reset() 方法会重置播放器 。要不会有问题,切换不了。

结束语
以上我是我在解决前段播放 流媒体数据的过程。其中还有几个问题,需要研究改进。

RTSP 在 chrome 的高版本浏览器播放
videojs-contrib-hls 这个库播放 hls (猜测,是不是后端给的数据流有问题)
http://www.cnblogs.com/qiaojie/p/5733335.html

转载请注明:SuperIT » 前端播放流媒体(RTMP,RTSP,HLS)

喜欢 (0)or分享 (0)