html页面上使用vlc,【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播放器

下载更早的版本

选择更早的版本

选择 2.2.8

2.2.8

下载win32版本

win32

vlc-2.2.8-win32.exe

vlc-2.2.8-win32.exe

二、使用

html中嵌入标签

class="naturalVideo"

type="application/x-vlc-plugin"

id="vlc"

events="True"

classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"

codebase=""

height="340"

width="190"

>

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