【JS&JQuery】使用VLC在html中播放rtsp视频

本文系统: windows10 64位
本文浏览器: IE11
本文 VLC 版本: 使用 vlc-2.2.8-win32.exe 版本 下载
使用说明:
使用 vlc-2.2.8-win64.exe 版本时会报错,无法使用vlc.playlist.add(mrl)
使用 VLC 老版本 2.X 版本，新版本 3.X 不行
谷歌浏览器不支持

浏览器支持

一 、系统中安装vlc播放器

VLC官方下载地址

下载更早的版本

选择更早的版本

选择 2.2.8

2.2.8

下载win32版本

win32

vlc-2.2.8-win32.exe

vlc-2.2.8-win32.exe

二、使用

html中嵌入标签

<object
  class="naturalVideo"
  type="application/x-vlc-plugin"
  id="vlc"
  events="True"
  classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
  codebase=""
  height="340"
  width="190"
>
    <param name="mrl" value="" />
    <param name="volume" value="50" />
    <param name="autoplay" value="true" />
    <param name="loop" value="false" />
    <param name="fullscreen" value="true" />
</object>

script中加入播放源

var vlc = document.getElementById('vlc');
var mrl = encodeURI('rtsp://......');
var id = vlc.playlist.add(mrl);
vlc.video.aspectRatio = '4:3'; //获取和设置长宽比使用视频屏幕。该属性采用字符串作为输入值。有效值为：“1:1”，“4:3”，“16:9”，“16:10”，“221:100”和“5:4”
let vlcVideo = this.$refs.vlcVideo;//包裹vlc的设置宽高
let vlc_h = vlcVideo.clientHeight;
let vlc_w = vlcVideo.clientWidth;
vlc.style.height = `${vlc_h}px`;
vlc.style.width = `${vlc_w}px`;
vlc.playlist.playItem(id);

三、IE配置

以下设置完成后需要重启计算机

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

---

参考文档网址:
官方文档官方
VLC控件——属性和方法
vlc插件详细使用说明推荐
HTML中实现VLC播放器并对播放器进行控制
html中嵌入VLC播放器（页面展示大华摄像机实时监控）
vlc rtsp流 转 http播放视频
关于RTSP在HTML5前端播放问题解决办法