最近项目上需要将视频在web上能够预览。 起初用到了VLC插件。但是该插件有个弊端让人很蛋疼。因为谷歌37版以后及其火狐等主流浏览器很多不支持。除此之外即使支持,也要另外下载一个vlc客户端安装好了。才开在浏览器上看的到。苦不堪言。
后来我们想了一个办法,将视频切成图片,一张一张的发给我web上的img标签去显示。这种方法可以是可以。就是技术上的不成熟导致不稳定。除此之外,由于服务器是一个cpu性能不佳的嵌入式liunx上,图片的一些编解码等等,造成了cpu的极度消耗。很容易就达到了200%.会造成程序的不正常运行。
痛定思痛后,我们查阅资料,发现可以用flash+html5+video.js可以显示rtmp协议的视频流。于是我们通过将rtsp流转成rtmp流。完美的再web界面上呈现了视频。还算比较稳定。 下面将web端具体的实现展示如下:
html代码如下:
RTMP测试
引用的js文件,在文末有提供下载。
几个关键点:
source部分
里面的rtmp地址填写准确,type可以是rtmp/mp4 或者rtmp/flv 。
video.js版本要是5.x版本的,6。x版本由于对flash不支持了,用起来是无效的。 这一点需要注意。
做好以上这些后,如果你用的是静态网页,你会发现,你的rtmp地址是正确的,但是依然看不到视频。什么原因呢? 原因是你要把你的网页挂在服务器上跑起来。不要单独作为一个网页文件打开。这样是无效的。
效果如下:
不同的可以加我qq:739462304
最后,附上需要相关文件下载点
链接: 密码:hbm4
参考文献: