前言

最近项目需要流媒体的播放,后端一共提供了 三种流数据(RTSP,RTMP,HLS),在不同的场景可能会使用到不同方式播放,就需要做到适配, 支持所有的流数据播放。花了一段时间研究,在这里和大家分享一下,还有些遗留问题,看大家有没有好的方法。

RTSP

简介

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

html code
  <object type='application/x-vlc-plugin' id='vlc' width="200" height="500" events='True' pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
<param name='mrl' value='rtsp://***********************/Streaming/Channels/1' />
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param value="transparent" name="wmode">
<embed id='vlc' wmode="transparent" type="application/x-vlc-plugin" width="200" height="500" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://***********************/Streaming/Channels/1">
</object>

代码很简单,更播放 flash 差别不是很大,需要改几个点,

1.object 标签的 type , codebase 属性

2.param 标签 <param name='mrl' value='rtsp://***********************/Streaming/Channels/1' />

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 id="video" class="video-js vjs-default-skin" controls  preload="none" data-setup='{}'>
<source src="./src/z.m3u8" type="application/x-mpegURL">
</video>

直接写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
<video id="vlc" class="video-js vjs-default-skin" controls  preload="none" data-setup='{}'></video>

看到我没有写 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() 方法会重置播放器 。要不会有问题,切换不了。

结束语

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

  1. RTSP 在 chrome 的高版本浏览器播放

    2.videojs-contrib-hls 这个库播放 hls (猜测,是不是后端给的数据流有问题)

前段播放 流媒体(RTMP,RTSP,HLS)的更多相关文章

  1. 流媒体(RTMP,RTSP,HLS)

    流媒体(RTMP,RTSP,HLS) 前言 最近项目需要流媒体的播放,后端一共提供了 三种流数据(RTSP,RTMP,HLS),在不同的场景可能会使用到不同方式播放,就需要做到适配, 支持所有的流数据 ...

  2. Golang开源流媒体服务器(RTMP/RTSP/HLS/FLV等协议)

    一. lal 简介 lal是开源直播流媒体网络传输项目,主要由三部分组成: lalserver:流媒体转发服务器.类似于nginx-rtmp-module等服务,但支持更多的协议,提供更丰富的功能. ...

  3. 如何基于EasyDSS流媒体RTMP、HLS(m3u8)、HTTP-FLV、RTSP服务器体系的全套SDK完成各种场景下的视频应用需求

    需求背景 回顾EasyDSS的发展过程,基本上保持的是先局部后系统.先组件后平台的发展方式,一步一步夯实每一个细节功能点,从最基础.最兼容的音视频数据的拉流获取,到高效的.全兼容的数据推流,再到流媒体 ...

  4. 解决EasyDSS、EasyNVR流媒体RTMP、HLS(m3u8)、HTTP-FLV播放提示H5播放错误的问题

    背景介绍 EasyDSS流媒体解决方案提供的是一站式的转码.点播.直播.录像.检索.时移回放服务,它的出现极大地简化了开发和集成的工作,基于其强大的后台管理能力,支持多种特性需求,完全能够满足企业视频 ...

  5. 基于EasyDSS流媒体RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器解决方案创建视频点播、短视频、视频资源库等视频播放系统

    需求背景 最近有很多用户咨询关于视频点播问题,主要需求集中在如何搭建属于自己的视频点播平台: 实现的功能可以大体归类为:对应自身拥有的视频文件,需要发布到一个网站,其他用户都可以实现点播观看. 针对于 ...

  6. rtmp/rtsp/hls公网测试地址

    相信大家在调试播放器的时候,都有这样的困惑,很难找到合适的公有测试源,以下是大牛直播整理的真正可用的直播地址源. 其中,rtmp和rtsp的url,用https://github.com/daniul ...

  7. [转]流媒体协议介绍(rtp/rtcp/rtsp/rtmp/mms/hls)

    [转]流媒体协议介绍(rtp/rtcp/rtsp/rtmp/mms/hls) http://blog.csdn.net/tttyd/article/details/12032357 RTP       ...

  8. 最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)

    http://blog.csdn.net/leixiaohua1020/article/details/43936415 ======================================= ...

  9. 流媒体基础实践之——RTMP和HLS分发服务器nginx.conmf配置文件(解决了,只能播放RTMP流而不能够播放HLS流的原因)

    user www www; worker_processes ; error_log logs/error.log debug; #pid logs/nginx.pid; events { worke ...

随机推荐

  1. FFmpeg纯净版解码 av_parser_parse2

    主要是通过av_parser_parse2拿到AVPaket数据,跟av_read_frame类似. 输入必须是只包含视频编码数据“裸流”(例如H.264.HEVC码流文件),而不能是包含封装格式的媒 ...

  2. c语言实现开灯问题

    开灯问题: 有n盏灯,编号为1~n,第1个人把所有灯打开,第2个人按下所有编号为2 的倍数的开关(这些灯将被关掉),第3 个人按下所有编号为3的倍数的开关(其中关掉的灯将被打开,开着的灯将被关闭),依 ...

  3. Asp.net MVC中Html.Partial, RenderPartial, Action,RenderAction 区别和用法(mvc部分视图的添加)

    Partial 和RenderPartial:这两个的性质都是一样, 只指把一个个View给镶入进来, 只是回传值有点不一样Partial 回传的一个Object (MvcHtmlString), 回 ...

  4. iOS SQLite3的使用

    1.创建可修改的数据库文件 //应用包内的内容是不可写的,所以需要把应用包内的数据库拷贝一个副本到资源路径去 - (void)createEditableDatabase{ BOOL success; ...

  5. 【面试】HTTP post请求与get请求的区别

    1. get是从服务器上获取数据,post是向服务器传送数据. 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过 ...

  6. 用wget命令下载jdk

    Oracle官网上下载jdk,需要点击accept licence的才能下载,使用下面的命令,直接可以下载.wget --no-check-certificate --no-cookies --hea ...

  7. 最简单的android自定义进度条样式

    一.自定义圆形进度条样式 1.在安卓项目drawable目录下新建一个xml文件如下:<?xml version="1.0" encoding="utf-8&quo ...

  8. OpenSSL 1.0.2e 3 Dec 2015

    目录: 1,交叉编译openssl 2,win32  vc9 编译 openssl 1,交叉编译openssl [原]交叉编译openssl不修改Makefile的方法 http://blog.chi ...

  9. HDU 1394 Minimum Inversion Number ( 树状数组求逆序数 )

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 Minimum Inversion Number                         ...

  10. java分享第二十天(build.xml的语法及写法)

    通常情况下,Ant构建文件build.xml应该在项目的基础目录.可以自由使用其他文件名或将构建文件中其他位置.在本练习中,创建一个名为build.xml 在电脑的任何地方的文件. <?xml ...