欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 12:07:51
...

VLC插件

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

局限和问题

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

效果图

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

测试环境

浏览器版本 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,火狐和谷歌的高版本我测试过是不可以的,如果你们的项目有对浏览器有特殊的要求,就需要用其他方案了,当然如果大家有更好的兼容性解决方案可以告诉我,一起学习进步。

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