VLC插件在浏览器下(IE11)实现播放rtsp视频直播流

VLC插件

最近项目用到需要在浏览器上播放视频流,尝试了很多种方式去解决,包括使用ffmpeg转码成rtmp播放,websocket结合webrtc等方式,但是效果都不是很好,而且存在一定的丢包和搭设的复杂度,对于我们只是想简单实现直播播放效果的,能怎么容易怎么容易是吧,由于html的video标签并不能直接播放rtsp直播流,所以我们只要借助其他的工具来实现,本文主要是自己通过vlc插件来显示rtsp流视频的案例,仅供参考。

局限和问题

搜索过网上资料,大家应该都知道VLC插件能够在浏览器中播放rtsp,但是多数文章都是很早的案例,且很多兼容性存在很大问题,插件目前只支持ie,像chrome在46版本之后根本就无法使用

效果图

在这里插入图片描述

测试环境

浏览器版本 IE 11,VLC插件版本 vlc-1.0.5-win32, 如果是高版本的你会发现所有浏览器你的VLC要不不支持,要么就是一片空白不显示。
因为版本比较低,找不到的或者没有的可以下载这个 vlc-1.0.5-win32.,现在上传文件都要积分的吗==尴尬

rtsp测试地址

rtsp这里提供一个可测试的地址,rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov
打开VLC播放视频验证是否可以播放,打开播放器,选择菜单中“媒体”->“打开网络串流…”。在弹出页面中填入视频地址即可。也可以直接上代码,不出意外即可看到画面。

上代码

以下是我html页面的代码:结合网上的案例,只要对地址稍加修改即可。如对页面有要求的,可自行结合js拓展功能。

<!DOCTYPE html>
<html lang="en" dir="ltr"><head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<object type='application/x-vlc-plugin' id='vlc' events='True'
        classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="720" height="540">
    <param name='mrl' value='写上你自己的rtsp地址' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
</object>
</body>

</html>

在这里就实现了简单的浏览器播放rtsp视频直播流,但是会发现,视频存在一定的延迟,这也是后续需要优化的地方。本案例主要环境是在IE下,版本11,火狐和谷歌的高版本我测试过是不可以的,如果你们的项目有对浏览器有特殊的要求,就需要用其他方案了,当然如果大家有更好的兼容性解决方案可以告诉我,一起学习进步。

转载请保留原文链接。本文内容均为实践后的学习整理。

发布了1 篇原创文章 · 获赞 0 · 访问量 836
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览