本文系统:
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版本
win32vlc-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前端播放问题解决办法
